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

落日映苍穹つ 2023-03-01 09:44 4阅读 0赞

## 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`字段，值是那个前缀，然后查询的时候[发现这篇文章][Link 1]里面有一句话：

> 仔细看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
    })

--------------------

就酱~

[Link 1]: https://www.cnblogs.com/strinkbug/p/6073806.html