Django中ajax发送post请求 报403错误CSRF验证失败解决方案


Posted in Python onAugust 13, 2019

前言

今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败;先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了;很显然,用ajax发送post请求这样就白搭了;

文末已经更新更简单的方法,上面的略显麻烦

上网上查了一下,看了几个别人的博客,才知道官网也早有说明解决办法,大致流程就是:

就是新建一个JavaScript文件,然后把网上给的代码粘贴进去,然后在你使用ajax的页面把它引入一下;当然,如果你在网上找到的解决代码包含JQuery的话,那就需要在引入的JQuery之后引入了(毕竟解决代码不唯一,网上一找一堆,基本都是对的,原生JS和带JQuery的都有);

文末会附上我使用的JS相关代码,也可以去网上找!

如果上述没有解决你的问题,那就说明你和我踩了同样的一个小坑........

用了上面查到的方法,直接就解决了我的问题,但是随着我对代码修修改改、清除了相关页面的cookie,吃个饭再运行,竟然又报403的CSRF错误了;百思不得其解的我又去Django官网看了一下相关部分的文档,一堆英文看看大概找到了问题;

我发现我把html页面里面原先加的 {% csrf_token %} 这个东西给删掉了,加上谷歌的相关页面cookie被我一清除,csrftoken就被咔嚓了,再刷新页面,去html页面里也找不到 {% csrf_token %} ,没有了csrftoken那个cookie值,即使有相关的JS代码也毛用没有了;

打个比方:

  • 你吃饭需要工具,也就是筷子,但是饭都没有,你拿个筷子吃什么呀!!!
  • 这里的筷子就是解决问题的JS代码,而饭就是这个 {% csrf_token %} ,更确切说因该是浏览器中的叫 csrftoken 的 cookie;
  • 两者都有了,才能彻底解决吃饭的问题;

总结下来:

  • 使用ajax发送post请求时,html页面里一定要有 {% csrf_token %},在body里应该就没什么大问题;
  • 然后引入相关的JS解决代码;
  • 补充一下,和表单没什么太大关系,因为我的html页面里就没有表单,直接通过点击按钮发送的ajax请求;

Django中ajax发送post请求 报403错误CSRF验证失败解决方案

需要引入的相关JS代码

$(document).ajaxSend(function(event, xhr, settings) {
  function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }
  function sameOrigin(url) {
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
      (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
      // or any other URL that isn't scheme relative or absolute i.e relative.
      !(/^(\/\/|http:|https:).*/.test(url));
  }
  function safeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
 
  if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
  }
});

简单方法

  • 首先在你需要发起ajax post请求的页面的里面随便一个地方加上 {% crsr_token %}
  • 然后浏览器里查看源码,会有这么一个隐藏标签:<input type="hidden" name="csrfmiddlewaretoken" value="jlYb5LCP21TxGapw7OuO0xbHmRnyFzlgDapiDl1M1Vp6dOjPM4BlHOgOVeuPYQ27">
  • 在发起ajax post 请求时,组织json参数时,以下面这种方式使其成为参数,前两个参数是我自定义的请自行忽略,其中键值对中的键名为input标签的name名,值就为其value值
  • csrf = $('input[name="csrfmiddlewaretoken"]').val();
  • params = {'sku_id': sku_id, 'count': count, 'csrfmiddlewaretoken': csrf};
  • 这样就可以把csrf中的参数传递给后端,就不会有403错误了,相比前面用了好大一段JS代码要简洁的多

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python使用ctypes模块调用windowsapi获取系统版本示例
Apr 17 Python
python执行外部程序的常用方法小结
Mar 21 Python
python在windows下创建隐藏窗口子进程的方法
Jun 04 Python
儿童学习python的一些小技巧
May 27 Python
python flask web服务实现更换默认端口和IP的方法
Jul 26 Python
Python箱型图绘制与特征值获取过程解析
Oct 22 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
Jan 20 Python
使用python采集Excel表中某一格数据
May 14 Python
Python实现aes加密解密多种方法解析
May 15 Python
keras读取h5文件load_weights、load代码操作
Jun 12 Python
使用Python提取文本中含有特定字符串的方法示例
Dec 09 Python
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
Apr 03 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
Aug 13 #Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
Aug 13 #Python
Django rstful登陆认证并检查session是否过期代码实例
Aug 13 #Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
Aug 13 #Python
python实现对服务器脚本敏感信息的加密解密功能
Aug 13 #Python
python多线程+代理池爬取天天基金网、股票数据过程解析
Aug 13 #Python
Python字符串处理的8招秘籍(小结)
Aug 13 #Python
You might like
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
jquery动态添加删除一行数据示例
2014/06/12 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
九步学会Python装饰器
2015/05/09 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python内建模块struct实例详解
2018/02/02 Python
python生成随机红包的实例写法
2019/09/02 Python
python打开使用的方法
2019/09/30 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
python Cartopy的基础使用详解
2020/11/01 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
促销活动总结模板
2014/07/01 职场文书
会议简报格式范文
2015/07/20 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
React四级菜单的实现
2022/04/08 Javascript
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL