文章目录
- 背景
- 什么是跨域问题?
- 跨域问题的解决方案
- Django 解决跨域问题
背景
什么是跨域问题?
跨域问题是指浏览器的同源策略限制了来自不同域的 AJAX 请求。
具体来说:
- 同源策略要求源相同才能正常进行 AJAX 通信。
- 判断是否同源需要满足三个条件:
- 协议相同(http或https)
- 域名相同
- 端口相同
- 不满足以上条件就是不同源,属于跨域。
举个例子: - 前端域名是:http://www.example.com
- 后端域名是:http://api.example.com
虽然二者域名相关,但前三段不完全一致,所以属于跨域。
当前端通过 AJAX 请求后端接口时,就会触发浏览器的同源策略,请求会被阻止。
这就是跨域问题。
跨域问题的解决方案
- 部署时使前后端域名满足同源策略
- 通过 CORS 让后端 server 明确告知浏览器允许跨域请求
- 通过代理服务器避免前端直接跨域请求后端
前端代理的方式可以在开发环境使用,但实际生产环境还是应该后端启用 CORS。前端代理增加了部署复杂度。 - JSONP等其他跨域方案已经不再推荐,存在安全和使用上的限制。
如果前后端可以部署在同一个域名下,那么可以避免跨域,这是最简单的方案。如果前后端实在无法部署在同域名,那么最常见和推荐的就是后端启用 CORS。这是官方推荐的标准跨域方案。
Django 解决跨域问题
Django 框架中通过 django-cors-headers 这个模块解决。
- 安装库:
pip install django-cors-headers
- 在 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]
- 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',
]
- 添加⽩名单,配置 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',
)
此外,需要注意:
- 不要使用 ‘*’ 来接受任意域名访问
- 明确设置 allowed methods、headers 等来增加安全性
- 在生产环境中关闭 DEBUG 模式