解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
2024-08-25 06:14:46
众所周知前端向后台发送 post 请求时，必须验证 csrf，否则会报错 403 Forbidden。使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可，要是通过 Ajax 发送请求又该怎么办？下面提供三种解决办法：
<ul id="ddd">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn" type="button">Ajax 发送</button>
1. 方式一
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script>
$('#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);
}
})
})
</script>
2. 方式二
方式二仅在 Django 中适用，因为 {% csrf_token %} 是 Django 的模板语言，它会生成一个隐藏的 input 标签
<ul id="ddd">
{% csrf_token %} <!--添加这句会生成一个隐藏的 input 标签，name='csrfmiddlewaretoken'-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn" type="button">Ajax 发送</button>
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script>
$('#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);
}
})
})
</script>
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 的时候需要，实现这种效果的代码如下：
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script>
$('#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);
}
})
})
</script>
Tips：一定要导入
jquery.cookie.js和jquery-3.3.1.js文件 ！！！
最新文章
- Git标签和别名管理
- Windows调试学习笔记：（一）WinDBG中加载SOS和CLR
- Java中的排序算法（2）
- 关于BufferedWriter.write超过30W条数据写入过慢问题。
- systemstate dump 介绍
- iOS多线程的初步研究（五）-- 如何让NSURLConnection在子线程中运行
- JS判断是否为安卓orIOS
- cocos2d(粒子效果编辑器)
- 如何消除word中的回车符号
- 搭建OA平台
- 模板引擎mustache.js
- 单机部署redis主从备份
- static和final修饰方法
- node命令curl
- 『BUG』Android Studio 64位 始终提示 JVM 启动不了，JDK配置失败，error code -1
- UESTC 618 无平方因子数 ( 莫比乌斯)
- 网络流 E - Escape HDU - 3605
- python3 zip压缩文件压缩多个不同文件夹内的文件方法
- 【微软版本】redis 安装启动及设置密码<windows>
- Fortran 数据类型