Django做网页后端之解决Ajax的请求异域问题
最近学习了Django的框架嘛，写项目的时候，想前后端分离，就用Django做后端，遇到了典型的跨域问题，那么我的前端实力不够强，也不会用Ajax来解决这个跨域问题，于是着手于Django后端解决这个问题，也就是让服务器能够识别跨域的请求
首先我用个前端的测试界面，这是我最近写的一个简单的前端测试界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿贾克斯</title>
<style>
#request{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
<script>
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
</script>
</head>
<body>
<button>
点击发送请求
</button>
<div id="request">
</div>
<script>
const btn = document.getElementsByTagName('button')[0];
btn.onclick = function (){
//1。创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open('GET', 'http://127.0.0.1:8000/');
//3.发送
xhr.send();
//4.事件绑定
xhr.onreadystatechange=function (){
//处理服务端返回结果
// 判断服务器返回了所有的结果
if(xhr.readyState ===4){
//判断响应状态码
if(xhr.status >= 200 &&xhr.status <300){
//处理结果 行，头，空行，题
//1.响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符吗
console.log(xhr.getAllResponseHeaders())//所有响应头
console.log(xhr.response);
const div = document.getElementsByTagName('div')[0];
div.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
</body>
</html>
后端Django代码，首先是根目录下的url
from django.contrib import admin
from django.urls import path
from django.urls import include
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index),
]
接下来是处理url下的请求的view.py
from django.http import HttpResponse,JsonResponse
def index(request):
if request.method == 'GET':
print(request)
return HttpResponse('HELLO AJAX')
if request.method == 'POST':
print(request.POST)
return HttpResponse('HELLO AJAX')
接下来是典型的跨域问题：如图
控制台报错是跨域问题
可以打开这个请求的明明，数据都返回了
但是按照服务逻辑应该出现的
那么就是典型的跨域问题了
我想到之前的中间件可以控制接入服务器的域名和用户，我就想到了中间件解决这个问题。在度娘帮助下，确实有这个解决方案
记录一下
通过第三方包方式：https://github.com/ottoyiu/django-cors-headers
注意：第三方包对Django的版本有要求
- 安装这个包 pip install django-cors-headers
- 配置settings.py文件
在INSTALLED_APPS里添加“corsheaders”INSTALLED_APPS = [ ... 'corsheaders'， ... ] - 在MIDDLEWARE_CLASSES添加中间件：django-cors-headers
MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ) - 在sitting.py底部添加
CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = () CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', )
配置好之后，runserver，前端静态页面进行发送请求
可以看到，成功发送并接收。完美解决。
我用的Django是3.2版本的。给大家参考。