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中处理字符串之isdigit()方法的使用
May 18 Python
Python中map,reduce,filter和sorted函数的使用方法
Aug 17 Python
全面理解Python中self的用法
Jun 04 Python
python tornado微信开发入门代码
Aug 24 Python
解决安装pycharm后不能执行python脚本的问题
Jan 19 Python
python 实现selenium断言和验证的方法
Feb 13 Python
python程序变成软件的实操方法
Jun 24 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
Aug 20 Python
python3正则模块re的使用方法详解
Feb 11 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
Feb 17 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
Feb 29 Python
pytorch 两个GPU同时训练的解决方案
Jun 01 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程序员的技术成长规划
2016/03/25 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python在文本开头插入一行的实例
2018/05/02 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python操作toml文件的示例代码
2020/11/27 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
前台接待员岗位职责
2014/01/02 职场文书
读书演讲主持词
2014/03/18 职场文书
空乘英文求职信
2014/04/13 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
终止劳动合同通知书
2015/04/16 职场文书
纪委立案决定书
2015/06/24 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技