Django中ajax发送post请求 报403错误CSRF验证失败解决方案
作者:yaominghui 发布时间:2021-06-11 19:47:32
前言
今天学习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请求;
需要引入的相关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创建tcp服务端和客户端的具体代码,供大家参考,具体内容如下1.服务端serverfrom socket i
- 六、XML展望 任何一项新技术的产生都是有其需求背景的,XML的诞生是在HTML遇到不可克服的困难之后。近年来HTML在许多复杂的Web应用
- 如题:在python的函数调用中需要记录时间,下面是记录毫秒时间的方法。import datetimeimport timet1 = dat
- 示例:mysql> DELIMITER //mysql> CREATE PROCEDURE `statis`()
- JavaScript 中的并没有提供像 VBScript 里的 DateAdd 方法用于日
- 平时每逢alexa排名更新时,我都需要将所有相关的同类网站的排名整理一下,看一下这些对手网站的排名更新情况。做的多了,也就烦了,虽然也才30
- 最近从某网站下载了一批文档,但是文件是用数字串命名的文档(很多图书馆都这样吧),现在我也下载完了这些文件,也有这些文件的列表,就是不能一个一
- 简单使用最开始,我们用最短的代码体验一下logging的基本功能。import logginglogger = logging.getLog
- 本文实例讲述了Python按行读取文件的实现方法。分享给大家供大家参考,具体如下:小文件:#coding=utf-8#author: wal
- 很久没写过东西了,今天看了chinahuman 的《用asp自动解析网页中的图片地址,并将其保存到本地服务器》,于是优化了这个程序,并且将所
- 前言索引和切片是NumPy中最重要最常用的操作。熟练使用NumPy切片操作是数据处理和机器学习的前提,所以一定要掌握好。参考NumPy官方文
- 1. void ellipse(InputOutputArray img, Po
- 根据微软论坛作者的英文解释,.NET framework 4.0 安装失败回滚貌似是因为“msvcr100_clr0400.d
- 本文实例讲述了python实现从字典中删除元素的方法。分享给大家供大家参考。具体分析如下:python的字典可以通过del方法进行元素删除,
- python 定时器默认定时器只执行一次,第一个参数单位S,几秒后执行import threadingdef fun_timer(): pr
- Python list列表添加元素方法实际开发中,经常需要对 Python 列表进行更新,包括向列表中添加元素、修改表中元素以及删除元素。&
- 分享一个关于在pytest中,如何将测试用例文件中的变量传递到fixture函数。一、交代应用场景目前组内的项目,在根目录下是有一个conf
- 以下列出了两种数据库的方法:ASP+Access20001.要获取的ID值字段属性必须设为:自动编号(我们假设字段名为recordID)2.
- 在linux服务器部署thinkphp5的时候PHP报了Warning: require(): open_basedir restricti
- 函数是一种仅在调用时运行的代码块。可以将数据(称为参数)传递到函数中。函数可以把数据作为结果返回。创建函数在 Python 中,使用 def