解决浏览器跨域问题
前后端分离的项目中,由于前端所运行的域名地址与后端常常不一致,在发送ajax时,我们常常会碰到跨域问题。
这是浏览器制定的安全策略,浏览器跨域名请求数据时,需要响应数据中包含对应的响应头表示同意这个异端请求拿取我们服务端的数据。
简单粗暴的加响应头
在遇到跨域响应被浏览器检查时,会抛异常告诉我们需要加一些响应头,那么常用解决跨域的响应头是使用以下几个:
headers={
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type', # 用axios发送请求时可能要添加这个头
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS' # 一些请求方式,不确定是否有用
}
django项目解决方案
目前成熟的主流方案,使用django-cors-headers包:
pip install django-cors-headers
在Django的设置文件中添加corsheaders应用程序和中间件:
# 注册软件
INSTALLED_APPS = [
# ...
'corsheaders',
# ...
]
# 注册中间件
MIDDLEWARE = [
# ...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
# ...
]
-
添加以下配置项以允许所有跨域请求:
CORS_ORIGIN_ALLOW_ALL = True
-
只允许指定的源访问跨域请求:
将配置项改为False:CORS_ORIGIN_ALLOW_ALL = False
并添加以下配置项:CORS_ORIGIN_WHITELIST = [ 'http://localhost:3000', 'https://example.com' ]