在一个项目中做验证码功能，一开始思路是：前端发送请求让后端处理，使用了hutools验证码工具类，直接使用输出流进行输出到页面中，于是使用seesion进行存储验证码，在校验验证码输入是否正确时，再发送请求给后端，获取sesson中存储的数据，一遍遍测试之后发现每次的存储的数据都为空（项目提前做好了跨域）。

上网搜索相关资料，有使用拦截器，过滤器或者使用Interceptor的方法，但总结下来就是配置跨域，但项目中已经有了跨域，但没有使用跟其余人一样的做法。试了很多次才发现不是跨域问题，而是前端配置问题。

一、 跨域

如果你遇到了这种问题首先就是先做好跨域，可参考SpringBoot和Vue跨域Session不是同一个怎么解决（不用Redis）_springboot 不使用 redis_Keeling1720的博客-CSDN博客

二、前端配置

项目使用的是vite来构建vue，使用axios发送请求，所以首先在自己封装的请求中设置好前端请求的withCredentials属性为true，让其请求时携带cookie。特别提醒：typescript与JavaScript无特大差异，以下代码都可直接使用

可放main.js或main.ts或http.ts中

axios.defaults.withCredentials = true

或者

const httpInstance = axios.create({
    //基地址
    // baseURL: 'http://iyuhao.top',
    baseURL: baseURL,
    //超时时间
    timeout: 5000,
    withCredentials: true
})

做好上述两点，测试之后发现依然存在问题，通过打印sessionid发现还是不同的session

经过几个小时的查阅，发现请求头当中

 

Set-Cookie后有Path=/xxx，即后端项目路径，所以前端还需在vite.config.ts（vite搭建）vue.config.js中添加跨域（使用vite搭建的有所不同）

vite.config.ts

export default defineConfig({
  plugins: [vue()],
  base: './',
  resolve: {
    alias: {
      /** @ 符号指向 src 目录 */
      "@":  resolve(__dirname, "./src")
    }
  },

    //跨域
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8082/iyuhao',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

 一开始使用的是/api 这里/api代表的就是 直接可代替target里的路径，rewrite所代表的是将/api替换成’‘  （上述8082后的/iyuhao是项目中的context-path）

将/api 换成上述Path的路径即可。

再进行测试：

sessionid一致，同时也可取到存储的数据。同时响应标头也没有出现Set-Cookie