Django前后端分离开发项目跨域CORS(跨域资源共享)的设置

1.问题引入

对于利用django框架实现前后端分离的项目来说，经常要解决的问题就是跨域跨域请求。何为跨域请求？简单来说，就是当前发起的请求的域与该请求指向的资源所在的域不一致。当协议+域名+端口号均相同，那么就是同一个域。
前后端分离时，用户进行页面访问是直接访问的前端服务器，前端服务器完成所有页面的跳转。前端需要数据时，发送ajax/axios请求，后端处理后，提供数据服务。举个例子，http://www.xxx.com
发起了一个get请求，请求的地址是：
http://www.xxx.com/getuserlist?u=test,
这里就不存在跨域请求的问题。由于跨域请求存在诸多安全问题，例如CSRF攻击等，所以我们的浏览器针对这个安全问题会有一个同源策略，必须是我们上面说到的同源请求，才能顺利发出请求。

2.django解决跨域请求CORS的问题

2.1前提：设置了前后端不同的域名

1.设置hosts文件
编辑/etc/hosts文件，可以设置本地域名

sudo vim /etc/hosts

在文件中增加两条信息

127.0.0.1   api.example.site
127.0.0.1   www.example.site

2.前端请求时，保存了后端域名：

var host = 'http://api.example.site:8000';

3.修改settings配置,在ALLOWED_HOSTS，增加可以访问后端的域名

ALLOWED_HOSTS = ['http://api.example.site', 'http://127.0.0.1', 'http://localhost', 'http://www.example.site']

2.2为后端添加跨域CORS访问的支持

1.安装django-cors-headers插件

  pip install django-cors-headers

2.settings.py中添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

3.中间层设置

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CorsMiddleware应该放置得尽可能高，特别是在可以产生响应的任何中间件之前，如Django CommonMiddleware或Whitenoise WhiteNoiseMiddleware。如果以前没有，则无法将CORS头添加到这些响应中。

4.添加白名单

# CORS
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.example.site:8080',
    'api.example.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie
# 凡是出现在白名单中的域名，都可以访问后端接口
# CORS_ALLOW_CREDENTIALS 指明在跨域访问中，后端是否支持对cookie的操作。

5.请求头和允许的请求方法

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)