前后端跨域问题

Cross-origin resource sharing -跨域资源共享
允许浏览器向跨源（协议+域名+端口）的服务器，发出XMLHTTPRequest请求，从而克服了Ajax只能同源使用的限制
​

特点：
1，浏览器自动完成（在请求头中加入特殊头 或 发送特殊请求）
2，服务器需要支持（响应头中需要有特殊头）
​

1.简单请求

1.1简单请求的条件

1.请求方法如下：
GET HEAD POST
2.请求头仅包含如下：
Accept
Accept-Language
Content-type
Content-Language
3.Content-Type仅支持如下三种
application/x-www-form-urlencoded
application/form-data
text/plain

1.2简单请求跨域流程

1、请求中携带 Origin，该字段表明自己来自哪个域
2、如果请求头中 Origin在服务器接受范围内，则返回如下头
|响应头|作用|备注|
|Access-Control-Allow-Origin |||
|Access-Control-Allow-Credentials| 是否接受Cookie| (可选)|
|Access-Control-Expose-Headers| 如果需要获取其他头需要在此指定| (可选)|

​

2.预检请求

2.1.OPTIONS 请求发起，携带如下请求头

Origin 表明此请求来此哪个域 必选
Access-Control-Request-Methond 此次请求使用方法 必选
Access-Control-Request-Headers 此次请求使用的头 必选

2.2.OPTIONS接受响应阶段，携带如下响应头

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Accesss-Control-Allow-Headers
Access-Control-Allow-Credentials
Accsss-Control-Max-Age

2.3.主请求阶段

2.4.主响应阶段

3.Django 解决跨域问题

3.1 安装第三方库

使用的第三方库 django-cors-headers
https://pypi.org/project/django-cors-headers/
​

使用 pip 命令安装
pip install django-cors-headers

3.2 配置流程

1. INSTALLED_APPS 中添加 corsheaders
2. MIDDLEWARE中添加corsheaders.middleware.CorsMiddleware 位置尽量靠前，官方建议 django.middleware.common.CommonMiddleware 上方
3. CORS_ORIGIN_ALLOW_ALL 布尔值，如果为True 白名单不启用
4. CORS_ORIGIN_WHITELIST = [ “https://example.com”] 白名单
5. CORS_ALLOW_METHODS = (“GET”,“POST”,“PUT”,“DELETE”,“OPTIONS”,“PATCH”)
6. CORS_ALLOW_HEADERS = (“accept-encoding”,“authorization”,“content-type”,“dnt”,“origin”,“user-agent”,“x-csrftoken”,“x-requested-with”)

以下方法可选

7. CORS_PREFLIGHT_MAX_AGE = 86400
8. CORS_EXPOSE_HEADERS = []
9. CORS_ALLOW_CREDENTIALS 布尔值