Django Vue 跨域问题

2023-12-25 18:32:40

一、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，把请求转到后端的服务上，这样就不会有跨域的问题了。