django后台启动CORS跨越配置

背景

什么是跨域问题？

跨域问题是指浏览器的同源策略限制了来自不同域的 AJAX 请求。
具体来说:

• 同源策略要求源相同才能正常进行 AJAX 通信。
• 判断是否同源需要满足三个条件:
  1. 协议相同(http或https)
  2. 域名相同
  3. 端口相同
• 不满足以上条件就是不同源,属于跨域。
  举个例子:
• 前端域名是:http://www.example.com
• 后端域名是:http://api.example.com
  虽然二者域名相关,但前三段不完全一致,所以属于跨域。
  当前端通过 AJAX 请求后端接口时,就会触发浏览器的同源策略,请求会被阻止。
  这就是跨域问题。

跨域问题的解决方案

• 部署时使前后端域名满足同源策略
• 通过 CORS 让后端 server 明确告知浏览器允许跨域请求
• 通过代理服务器避免前端直接跨域请求后端
  前端代理的方式可以在开发环境使用,但实际生产环境还是应该后端启用 CORS。前端代理增加了部署复杂度。
• JSONP等其他跨域方案已经不再推荐,存在安全和使用上的限制。

如果前后端可以部署在同一个域名下,那么可以避免跨域,这是最简单的方案。如果前后端实在无法部署在同域名,那么最常见和推荐的就是后端启用 CORS。这是官方推荐的标准跨域方案。

Django 解决跨域问题

Django 框架中通过 django-cors-headers 这个模块解决。

1. 安装库:

pip install django-cors-headers
1

2. 在 settings.py 中添加应用:
   安装cors-headers应⽤

# 注册应用
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'corsheaders',  # 解决跨域CORS


]
1
2
3
4
5
6
7
8
9
10
11
12
13

3. MIDDLEWARE中启用中间件:（cors放在所有中间件的最外层，这样可以第一时间被检测，避免无意义的操作）

# 中间件
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 最外层的中间件

    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
1
2
3
4
5
6
7
8
9
10
11
12

4. 添加⽩名单，配置 CORS_ORIGIN_WHITELIST

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:80',
    'http://localhost:80',
)
CORS_ALLOW_CREDENTIALS = True  # 跨域时允许携带cookie
CORS_ORIGIN_ALLOW_ALL = True # 设置为 True 意味着接受任意跨域请求,这是非常危险的行为,上线时一定要设置为 False。CORS_ORIGIN_ALLOW_ALL = True,那么 CORS_ORIGIN_WHITELIST 和 CORS_ALLOW_METHODS 等其他CORS相关配置将不再起作用。

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

CORS_ALLOW_HEADERS = (
    'www-authorization',
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

此外,需要注意:

• 不要使用 ‘*’ 来接受任意域名访问
• 明确设置 allowed methods、headers 等来增加安全性
• 在生产环境中关闭 DEBUG 模式