django后台启动CORS跨越配置

文章目录

- 背景
- - 什么是跨域问题？
  - 跨域问题的解决方案
- [Django 解决跨域问题](#Django 解决跨域问题)

背景

什么是跨域问题？

跨域问题是指浏览器的同源策略限制了来自不同域的 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 这个模块解决。

安装库:

bash 复制代码

pip install django-cors-headers

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

bash 复制代码

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

    'corsheaders',  # 解决跨域CORS


]

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

bash 复制代码

# 中间件
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',
]

添加⽩名单，配置 CORS_ORIGIN_WHITELIST

bash 复制代码

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',
)

此外,需要注意:

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