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 viewsurlpatterns = [path('admin/', admin.site.urls),path('', views.index),
]

接下来是处理url下的请求的view.py

from django.http import HttpResponse,JsonResponsedef 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',
)