ajax post forbidden,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden。使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可,要是通过 Ajax 发送请求又该怎么办?下面提供三种解决办法:
- 1
- 2
- 3
Ajax 发送
1. 方式一
$('#btn').click(function () {
var li_content = [];
$('#ddd').children('li').each(function () {
li_content.push($(this).html());
});
console.log(li_content);
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content),
csrfmiddlewaretoken: '{{ csrf_token }}' // 添加这句
},
success: function (arg) {
console.log(arg);
}
})
})
2. 方式二
方式二仅在 Django 中适用,因为 {% csrf_token %} 是 Django 的模板语言,它会生成一个隐藏的 input 标签
{% csrf_token %}
123
Ajax 发送
$('#btn').click(function () {
var li_content = [];
$('#ddd').children('li').each(function () {
li_content.push($(this).html());
});
console.log(li_content);
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content),
csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val() // 添加这句,去获取 input 的值
},
success: function (arg) {
console.log(arg);
}
})
})
3. 方式三
因为 cookie 中同样存在 csrftoken ,所以可以在 js 中获取:$.cooke("cstftoken"),并将其添加到请求头中发送。
1、直接添加请求头:
$.ajax({
url: '/webs/test_json/',
headers: { "X-CSRFtoken":$.cookie("csrftoken")},
type: 'post',
data: {
'li_list': JSON.stringify(li_content)
},
success: function (arg) {
console.log(arg);
}
})
})
2、如果页面有多个 Ajax,那么可以设置全局的:
发送请求前会事先执行 $.ajaxSetup() 方法,它会从 cookie 中获取 csrftoken
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
}
}
});
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content)
},
success: function (arg) {
console.log(arg);
}
})
3、如果想要实现在当 get 方式的时候不需要提交 csrftoken,当 post 的时候需要,实现这种效果的代码如下:
$('#btn').click(function () {
var li_content = [];
$('#ddd').children('li').each(function () {
li_content.push($(this).html());
});
console.log(li_content);
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
/*
全局Ajax中添加请求头X-CSRFToken,用于跨过CSRF验证
*/
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
}
}
});
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content)
},
success: function (arg) {
console.log(arg);
}
})
})
Tips:一定要导入 jquery.cookie.js 和 jquery-3.3.1.js 文件 !!!
ajax post forbidden,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式相关推荐
- ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden.使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可, ...
- c .net ajax,Asp.net mvc 2中使用Ajax的三种方式
在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...
- ajax的post请求出现403错误,如何解决Django中ajax发送post请求报403错误CSRF验证失败的问题...
如何解决Django中ajax发送post请求报403错误CSRF验证失败的问题 发布时间:2021-02-05 14:23:57 来源:亿速云 阅读:92 作者:小新 这篇文章主要介绍了如何解决Dj ...
- AJAX异步请求解决跨域问题的三种方式
一 什么是跨域 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...
- $.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式
这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...
- 解决 QT 发送 HTTP 请求时遇到 qt.network.ssl: QSslSocket::connectToHostEncrypted: TLS initialization failed 问题
解决 QT 发送 HTTP 请求时遇到 qt.network.ssl: QSslSocket::connectToHostEncrypted: TLS initilization failed 问题 ...
- ajax请求传递参数的方式,Ajax请求 一般处理程序参数传递的几种方式
简介这篇文章主要介绍了Ajax请求 一般处理程序参数传递的几种方式以及相关的经验技巧,文章约869字,浏览量397,点赞数3,值得参考! //第一种Ajax请求 $.ajax({ type:" ...
- get请求400错误 vue_解决axios发送post请求返回400状态码的问题
今天在用 发送一个跨域的post请求时,遇到了一个坑:uncaught (in promise) error: request failed with status code 400. 前台代码如下: ...
- vue三种ajax请求方式,vue请求数据的三种方式
请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供 ...
- ajax上传多文件和数据,Ajax上传数据和上传文件(三种方式)
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) Title .btn { background-color: co ...
最新文章
- 病毒周报(081110至081116)
- 7.Windows线程切换_时钟中断切换
- RabbitMQ基础概念详细介绍
- 分隔链表Python解法
- sql中问号是干什么的??
- [css] 能不能使用纯css使你的浏览器卡死?怎么实现?
- Linux下编译、链接、加载运行C++ OpenCV的两种方式及常见问题的解决
- python 初始化一个4维向量_看图学NumPy:掌握n维数组基础知识点,看这一篇就够了...
- 四核处理器_2020年高通骁龙处理器排行榜
- dreamhost 优惠码_DreamHost如何通过OpenStack重塑自己
- web FG interview all
- 在过程中要正式批准可交付成果_PMP项目管理考试试题及答案解析 -
- 《计算机网络(第七版)谢希仁 编著》部分课后答案
- CentOS7.9 查询内网ip
- psp/psvita联机工具xlinkhandheldassistant,平台Xlink Kai
- STM32操作增量式编码器(一)----使用外部中断实现测速
- 引导路径动画 (1)
- 使用FFmpeg实现rtmp播放和音视频同步
- vue3 设置定时任务执行
- 芝加哥大学计算机博士年薪,专排TOP6芝加哥大学统计学博士录取
热门文章
- 220805我文明的体现在书法艺术上此对标志LOGO设计产生的积极深远影响分析
- 竞价域名是干什么的?为什么要进行域名竞价?
- [UE4] LogicDriver状态机基于管线(Conduit)的状态选择器
- (一)C++游戏开发-本地存储-介绍
- python模拟登录12306_利用Python与selenium自动化模拟登陆12306官网!
- 仲裁器设计(4)Weighted Round Robin
- 如何安装torch、Pytorch、torchversion
- 关于虚拟机中IPI中断的思考
- 将服务注册到eureka服务端
- 机器学习--归纳总结