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