DjangoVue跨域问题

一、Django中设置

使用pip安装

pip install django-cors-headers


setting.py中设置

INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
'corsheader.middleware.CorsMiddleware', # 尽量放在csrf前面
...
]


添加中间件，需要注意放的位置，在SessionMiddleware后面以及CommonMiddleware前面

添加配置参数


#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True # 允许携带COOKIE
CORS_ORIGIN_ALLOW_ALL = True #允许所有域名跨域，也可以在下面配置白名单
#白名单
# CORS_ORIGIN_WHITELIST = (
# 'http://127.0.0.1:8000',
# 'http://localhost:9528', #凡是出现在白名单中的域名，都可以访问后端接口
# )
#允许的请求头，不能用*，要写具体的请求头，不然Vue会跨域失败，在这里坑了我好久好久MD
CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'x-csrftoken'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)


二、Vue中设置

Vue中如果要携带COOKIEs，在配置axios的时候需要设置允许携带COOKIE请求，两种方法都可以。

1、axios设置default参数
// 允许携带COOKIE请求
axios.defaults.withCredentials = true
2、或者创建实例的时候设置withCredentials: true
//1. 创建新的axios实例，
const service = axios.create({
// 公共接口--这里注意后面会讲
baseURL: 'http://10.0.0.101:8000/api/v1/',
// 超时时间 单位是ms，这里设置了3s的超时时间
timeout: 30 * 1000,
withCredentials: true
})


跨域COOKIEs带不到后端的坑

参考 VUE 在谷歌浏览器中无法识别存储的COOKIE,以及跨域跳转

Firefox改COOKIE的SameSite预设，Mozilla鼓励开发者测网站兼容性

• 我这里认证使用的COOKIEs-sessionid的方式，所以跨域请求的时候需要带上COOKIEs，但是配置了上面的参数后，请求可以访问到后端，但是COOKIEs在后端一直带不过去。找了好久，发现是浏览器SameSite这个配置的问题。

SameSite可以有下面三种值：
None
浏览器会在同站请求、跨站请求下继续发送COOKIEs，不区分大小写。
Strict
浏览器将只在访问相同站点时发送COOKIE。（在原有COOKIEs的限制条件上的加强，如上文“COOKIE的作用域” 所述）
Lax
在新版本浏览器中，为默认选项，Same-site COOKIEs 将会为一些跨站子请求保留，如图片加载或者frames的调用，但只有当用户从外部站点导航到URL时才会发送。如link链接


• 原因是Chrome升级到80版本之后COOKIE的SameSite属性默认值由None变为Lax，这也就造成了一些访问跨域COOKIE无法携带的问题。当开发者明确配置SameSite为None，同时还设定Secure属性使用HTTPS连线，才能够让COOKIE可被跨站存取。

• 过去浏览器预设允许COOKIE跨站存取，因此开发者不需要特别设定，但由于预设属性变更，现在网站开发者必须要明确设定SameSite与Secure属性，例如response.setHeader("Set-COOKIE", "HttpOnly;Secure;SameSite=None")过去仰赖旧预设的网站才能正确运作，当网站没有正确配置这些属性，则功能就可能故障。

• 但是如果设置SameSite与Secure属性，那么就会强制需要https访问，还要再加上http转https的配置，实在是蛋疼。下面直接修改谷歌浏览器的SameSite配置来解决COOKIEs带不过去的问题

• 但是不可能每个人都修改浏览器配置呀，所以在生产环境可以使用nginx转发，可以在前端的nginx上，加上一层代理，比如匹配/api/v1，把请求转到后端的服务上，这样就不会有跨域的问题了。
  

1、打开chrome 输入 chrome://flags/ 搜索 SameSite by default COOKIEs

2、找到SameSite by default COOKIEs和COOKIEs without SameSite must be secure

3、将上面两项设置为 Disable

4、点击Relaunch

火狐浏览器设置跨域

1.进入火狐配置页进行设置

在地址栏输入：about:config

2.搜索”security.fileuri.strict_origin_policy”,并设置该项为false

3.重启浏览器