AJAX解决跨域的几种方式
AJAX解决跨域的几种方式
大家肯定遇到过jquery.js:9837 POST http://127.0.0.1:8033/test/ 403 (Forbidden)这种事情，具体原因不一一细表，来看解决办法。
这里以Django项目为例，并且，以jQuery演示，你要记得导入jQuery。
在ajax发送请求时，在data中带着csrf_token，不过这需要在body中提前生成token值。
前端页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<button id="submit">提交</button>
{% csrf_token %} <!-- 就这一行，csrf_token，也可以写在form表单中 -->
</body>
<!-- 首先引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('#submit').click(function () {
$.ajax({
url: "/test/",
type: "POST",
data: {"key": "value", "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
success: function (data) {
console.log(data)
}
})
})
</script>
</html>
views.py中代码示例：
from django.shortcuts import render, redirect, HttpResponse
def test(request):
if request.method == "POST":
print(request.POST) # <QueryDict: {'key': ['value'], 'csrfmiddlewaretoken': ['i1pSO6cBt8kMeopZ684smHQZmLC6Zg1vLl8IDq2eEk3QEo9pvtjZNIjXRNaIimTo']}>
return HttpResponse('OK啦')
return render(request, 'test.html')
可以看到，token值在request.POST中。这种方式用的较多。
这种方式用的也比较多，我们使用jQuery.ajaxSetup()函数帮我们处理。该函数用于为ajax预先设置（更改）一些默认设置。记住，它是全局生效的。如果我们在这个函数中配置关于ajax的一些设置，那么在以后的ajax请求中，都会使用该函数配置的设置。比如，我们可以在这个函数中配置解决跨域的参数。
前端页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<button id="submit">提交</button>
</body>
<!-- 首先引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 预先设置ajax的某些配置，这里配置跨域参数
$.ajaxSetup({
data: {csrfmiddlewaretoken:'{{ csrf_token }}'}
});
// 后续的ajax请求，正常使用即可，无需关心跨域问题
$('#submit').click(function () {
$.ajax({
url: "/test/",
type: "POST",
data: {"key": "value"},
success: function (data) {
console.log(data)
}
})
})
</script>
</html>
views.py中代码示例：
def test(request):
if request.method == "POST":
print(request.POST) # <QueryDict: {'csrfmiddlewaretoken': ['Ih344tfX2KyrOWZh1XbPfi5kS9NhJF0bbBMUTN5AdWhveWJHqiqmGjyinblT2LS4'], 'key': ['value']}>
return HttpResponse('OK啦')
return render(request, 'test.html')
可以看到，与方式1一样，token值都放在了request.POST中。
最后，还有一种放在request.META中，但是这种方式需要jquery.cookie.js文件搭配。
前端页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<button id="submit">提交</button>
</body>
<!-- 首先引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 这种方式必须引入 jquery.cookie.js 文件，这里使用cdn，也可以下载到本地使用 -->
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$('#submit').click(function () {
$.ajax({
url: "/test/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken'), "zhangkai": 666},
data: {"key": "value"},
success: function (data) {
console.log(data)
}
})
})
</script>
</html>
views.py中代码示例：
from django.shortcuts import render, redirect, HttpResponse
def test(request):
if request.method == "POST":
print(request.POST) # <QueryDict: {'key': ['value']}>
print(request.META) # 'HTTP_X_CSRFTOKEN': 'M1fqH9w6OIxkfKECCMYXe4Qb2tYPd1fCflYgwtmJZUgoFKo217duF5j9xvwrw77v'
return HttpResponse('OK啦')
return render(request, 'test.html')
