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程序语言快速上手教程
Jul 18 Python
python基础教程之基本数据类型和变量声明介绍
Aug 29 Python
Python3控制路由器——使用requests重启极路由.py
May 11 Python
python删除过期log文件操作实例解析
Jan 31 Python
Python实现的简单读写csv文件操作示例
Jul 12 Python
Linux下python3.6.1环境配置教程
Sep 26 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
May 16 Python
opencv 实现特定颜色线条提取与定位操作
Jun 02 Python
python中导入 train_test_split提示错误的解决
Jun 19 Python
python如何导出微信公众号文章方法详解
Aug 31 Python
Python使用windows设置定时执行脚本
Nov 12 Python
python 模块导入问题汇总
Feb 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实现Soap通讯的方法
2014/11/03 PHP
php实现httpRequest的方法
2015/03/13 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python实现带百分比的进度条
2016/06/28 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
食堂员工工作职责
2013/12/18 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
交通事故调解协议书
2014/04/16 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers