vue使用代理转发，请求中未携带cookie，导致后端拿不到JSESSIONID

bug

bug是这样的：在验证验证码是否正确的接口里，发现总是返回验证码输入错误，经过后端检查，他没有获取到JSESSIONID，这是从前端的请求头里的cookie带过去的，然而，这个接口的请求头里面并没有携带cookies，我又检查了一下，我的axios设置了withCredentials：true，允许发送啊，但就是没携带。浏览器也没禁止cookie。

---

查询

仔细想了一下，这个问题是在，后台要给所有接口都加一个前缀/wxconfig，之后出现的。
然后请求头里面就没有cookie了，但是仔细看了控制台的响应头发现：在验证验证码是否正确之前，先是请求了验证码，它是有携带cookie的，而后面的接口就都没有了。
然后检查了这个携带cookie的响应头：

set-cookie: JSESSIONID=4b435ffd9e0-2722-4f42-a963-0dcxv78fg782309; Path=/wxconfig; HttpOnly

发现了吗，这里面有一个Path字段，值是那个前缀，然后查询的时候发现这篇文章里面有一句话：

仔细看response header中的set-cookie头可以发现，其中有一个Path=/webserver/，说明这个cookie是有适用范围的。只能在/webserver/路径下使用

然后又查了关于响应头Response headers 里面的 set-cookie的信息：

Set-Cookie响应头是服务器返回的响应头，用来在浏览器种cookie，一旦被种下，当浏览器访问符合条件的url地址时，会自动带上这个cookie

综上所述，是我的接口代理有问题，没把这个前缀写入，所以在请求的时候接口不符合这个路径，所以未携带cookie。

---

解决

因为我的项目里（vue3.0）用了接口代理，所以就从这里开始找，因为后台说给所有接口加一个前缀/wxconfig，然后这个文件.env.development（关于这个文件配置看官网）写入这个基本前缀：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/wxconfig'

所以代理是这样写的：

proxy: {
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {       // 这是你根目录下的.env.development文件里配置的接口前缀，用他代理
    target: `http://192.168.0.11:8700`,    // 后台
    changeOrigin: true,
    // pathRewrite: { }          这里不用重写，因为接口都有这个统一的前缀。(一般只是用来解决跨域，而真实接口都没有这个前缀，那需要将它重写为空字符串)
  }
},

你以为这样就完了吗，并没有，你去发送请求就会发现控制台的接口路径没有这个前缀，上面只是用这个前缀去代理解决前后端分离跨域的问题，还要在axios里将这个前缀配成基础路径：

axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url  
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

---

就酱~