介绍
这篇文章主要介绍了如何解决Django中ajax发送帖子请求报403错误CSRF验证失败的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
今天学习Django框架,用ajax向后台发送帖子请求,直接报了403错误,说CSRF验证失败;先前用模板的话都是在里面加一个{% csrf_token %}就直接搞定了CSRF的问题了,很显然,用ajax发送帖子请求这样就白搭了;
文末已经更新更简单的方法,上面的略显麻烦
上网上查了一下,看了几个别人的博客,才知道官网也早有说明解决办法,大致流程就是:
就是新建一个JavaScript文件,然后把网上给的代码粘贴进去,然后在你使用ajax的页面把它引入一下,当然,如果你在网上找到的解决代码包含JQuery的话,那就需要在引入的JQuery之后引入了(毕竟解决代码不唯一,网上一找一堆,基本都是对的,原生JS和带JQuery的都有),
文末会附上我使用的JS相关代码,也可以去网上找!
如果上述没有解决你的问题,那就说明你和我踩了同样的一个小坑........
用了上面查到的方法,直接就解决了我的问题,但是随着我对代码修修改,改清除了相关页面的饼干,吃个饭再运行,竟然又报403的CSRF错误了,百思不得其解的我又去Django官网看了一下相关部分的文档,一堆英文看看大概找到了问题;
我发现我把html页面里面原先加的{% csrf_token %}这个东西给删掉了,加上谷歌的相关页面饼干被我一清除,csrftoken就被咔嚓了,再刷新页面,去html页面里也找不到{% csrf_token %},没有了csrftoken那个cookie值,即使有相关的JS代码也毛用没有了;
打个比方:
<李> 你吃饭需要工具,也就是筷子,但是饭都没有,你拿个筷子吃什么呀! ! !
<李> 这里的筷子就是解决问题的JS代码,而饭就是这个{% csrf_token %},更确切说因该是浏览器中的叫csrftoken的饼干;
<李> 两者都有了,才能彻底解决吃饭的问题;
总结下来:
<李> 使用ajax发送帖子请求时,html页面里一定要有{% csrf_token %},在身体里应该就没什么大问题;
<李> 然后引入相关的JS解决代码;
<李> 补充一下,和表单没什么太大关系,因为我的html页面里就没有表单,直接通过点击按钮发送的ajax请求;
需要引入的相关JS代码
美元(文档).ajaxSend(函数(事件,,xhr,设置),{
function 才能;getCookie(名字),{
,,,var cookieValue =,空;
,,,if (document.cookie ,,, document.cookie !=, & # 39; & # 39;), {
,,,,,var cookies =, document.cookie.split (& # 39;; & # 39;);
,,,,,for (var 小姐:=,0;,小姐:& lt;, cookies.length;,我+ +),{
,,,,,,,var cookie =, jQuery.trim(饼干[我]);
,,,,,,,//,Does 却;能够cookie string begin with 从而name 想要什么?我方表示歉意
,,,,,,,if (cookie.substring (0,, name.length +, 1),==,(时间+ name & # 39;=& # 39;)), {
,,,,,,,,,cookieValue =, decodeURIComponent (cookie.substring (name.length +, - 1));
,,,,,,,,,休息;
,,,,,,,}
,,,,,}
,,,}
,,,return cookieValue;
,,}
function 才能sameOrigin (url), {
,,,//,url could be relative 或是scheme relative 或是绝对的
,,,var host =, document.location.host;,//, host +端口
,,,var protocol =, document.location.protocol;
,,,var sr_origin =, & # 39;//& # 39;, +,主机;
,,,var origin =, protocol +, sr_origin;
,,,//,Allow absolute 或是scheme relative URLs 用same 起源
,,,return (url ==, origin | |, url.slice (0,, origin.length +, 1),==, origin +, & # 39;/& # 39;), | |
,,,,,(url ==, sr_origin | |, url.slice (0,, sr_origin.length +, 1),==, sr_origin +, & # 39;/& # 39;), | |
,,,,,//,趁机any other URL that 不# 39;t scheme relative 或是absolute i.e 相对的。
,,,,,! (/^ (\/\/http: | | https:)。*/test (url));
,,}
function 才能safeMethod(方法),{
,,,return (/^(| | |选项头跟踪)$/test(方法));
,,}
,
if 才能;(! safeMethod (settings.type),,,, sameOrigin (settings.url)), {
,,,xhr.setRequestHeader (“X-CSRFToken",, getCookie (& # 39; csrftoken& # 39;));
,,}
});
