vue-admin-template里通过axios发起请求，携带不了cookie给后端

[gold-fisher]

你好，最近基于vue-admin-template做了个后台，是前后端分离的，后端用的python。在权限这块儿，遇到个问题，登陆成功后，服务器返回了token给前端，前端将token保存在cookie里，再请求其他接口时，没有把cookie传递给后端。

如图，

[gold-fisher]

而且withCredentials: true, 已经打开了，vue.config.js里边也已经移除掉了devserver的proxy和after,麻烦帮忙看下是怎么回事。

[mayunhai]

而且withCredentials: true, 已经打开了，vue.config.js里边也已经移除掉了devserver的proxy和after,麻烦帮忙看下是怎么回事。

请求随带的 cookie 在这里看。这个只要浏览器有 服务端就能看的到

[gold-fisher]

如图所示，是没有的，

[mayunhai]

你这个跨域了

如图所示，是没有的，

[mayunhai]

为什么要移除代理，代理的目的就是为了 解决跨域问题的

[gold-fisher]

为什么要移除代理，代理的目的就是为了 解决跨域问题的

移除这个是为了彻底移除掉mock.js，因为我的数据是从后端取得。跨域我后段也做了处理的。而且跨域的话，前端浏览器控制台会报错的吧，我的控制台没看到报错

[mayunhai]

为什么要移除代理，代理的目的就是为了 解决跨域问题的

移除这个是为了彻底移除掉mock.js，因为我的数据是从后端取得。跨域我后段也做了处理的。而且跨域的话，前端浏览器控制台会报错的吧，我的控制台没看到报错

withCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，而且还要设置header('Access-Control-Allow-Credentials: true');

[gold-fisher]

嗯，后端设置的白名单，
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = ('http://localhost:9528',)
这样设置也还是携带不了cookie。

为什么要移除代理，代理的目的就是为了 解决跨域问题的

移除这个是为了彻底移除掉mock.js，因为我的数据是从后端取得。跨域我后段也做了处理的。而且跨域的话，前端浏览器控制台会报错的吧，我的控制台没看到报错

withCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如[http://localhost:8080，不能是*，而且还要设置header('Access-Control-Allow-Credentials](http://localhost:8080%EF%BC%8C%E4%B8%8D%E8%83%BD%E6%98%AF*%EF%BC%8C%E8%80%8C%E4%B8%94%E8%BF%98%E8%A6%81%E8%AE%BE%E7%BD%AEheader('Access-Control-Allow-Credentials): true');

[Tschiho]

为什么要移除代理，代理的目的就是为了 解决跨域问题的

移除这个是为了彻底移除掉mock.js，因为我的数据是从后端取得。跨域我后段也做了处理的。而且跨域的话，前端浏览器控制台会报错的吧，我的控制台没看到报错

你解决了吗，想问下你怎么解决的？

[huangguang93]

我也想问下你解决了吗？怎么解决的，我也遇到了～

[full-stacks]

解决了吗？这个问题我也遇到了

[benlau6]

解决了吗？这个问题我也遇到了

@huangguang93
@linzhuhui710

看看以下4點有沒有做對

1. backend Access-Control-Allow-Origin 要填
   1.1 http://localhost:9528 (假設你frontend port是9528, host是localhost)
   1.2 http://127.0.0.1:9528 (假設你frontend port是9528, host是127.0.0.1)
   P.S. Origin is only considered to be the same if the protocol, host and port is the same
   Ref. https://www.w3.org/Security/wiki/Same_Origin_Policy
2. backend Access-Control-Allow-Credentials 要為 true
3. frontend src/utils/request.js 裡面的 axios.create 的 withCredentials 要為 True
4. cookie body 不能大於4kb, 一定要就在 frontend src/utils/auth.js 裡面 取代Cookies 為 sessionStorage, syntax 如下

export function getToken() {
  return sessionStorage.getItem(TokenKey)
}

export function setToken(token) {
  return sessionStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return sessionStorage.removeItem(TokenKey)
}