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基于scrapy采集数据时使用代理服务器的方法
Apr 16 Python
python字符串过滤性能比较5种方法
Jun 22 Python
Python机器学习库scikit-learn安装与基本使用教程
Jun 25 Python
Python 多维List创建的问题小结
Jan 18 Python
Python list列表中删除多个重复元素操作示例
Feb 27 Python
对Python 检查文件名是否规范的实例详解
Jun 10 Python
python设置环境变量的原因和方法
Jun 24 Python
python3中类的继承以及self和super的区别详解
Jun 26 Python
pytorch-RNN进行回归曲线预测方式
Jan 14 Python
基于Keras的格式化输出Loss实现方式
Jun 17 Python
python如何快速生成时间戳
Jul 21 Python
python跨文件使用全局变量的实现
Nov 17 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
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
Javascript删除数组里的某个元素
2019/02/28 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
js实现车辆管理系统
2020/08/26 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python多继承顺序实例分析
2018/05/26 Python
python匿名函数用法实例分析
2019/08/03 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
2015试用期转正工作总结
2014/12/12 职场文书
客房领班岗位职责
2015/02/11 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
退货证明模板
2015/06/23 职场文书
会议主持词结束语
2015/07/03 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技