关于Set-Cookie中的值无法自动保存在浏览器中Cooike的解决方案（如何使用代理来解决）

关于Set-Cookie中的值无法自动保存在浏览器中Cooike的解决方案

背景情况：本人项目，前端react项目（localhost:3000），后端是在开发服务器上（10.99.xx.xx:9080/项目名）,前端登录时，后端反应的响应头上的Set-Cookie:‘xxxxxxx’**

目标： 将Set-Cookie中的值存储在浏览器的Application中的Cookies中，在以后的请求中，会自动带上application中的Cookie发送请求。

**问题：**无法将Set-Cookie中的值存储在浏览器Application的cookie中，导致以后的请求都是登录失败或者cookie失效，然后一直重定向到登录页面登录

**解决方法：**使用 http-proxy-middleware 进行代理
如何实现：
1、在项目的src文件中新增一个文件setupProxy.js

2、在新建的文件内编辑一下代码：需引入http-proxy-middleware。 ’npm i http-proxy-middleware‘
const {createProxyMiddleware} = require(‘http-proxy-middleware’);
module.exports = function(app){
app.use(createProxyMiddleware(
‘/api’,
{
target: ‘http://10.99.xx.xx:9080/项目名’,
pathRewrite: {‘^/api’: ‘’},
changeOrigin: true,
cookiePathRewrite:{‘/项目名’:‘’},
}
))
}
**注意事项：**cookiePathRewrite:{‘/项目名’:‘’}中’/项目名’不固定会根据登录时返回的set-cookie的值而定
如：在响应头中Set-Cookie中的参数除了cookie外，还有一个参数为path：‘/项目名/’, 那么代码就需要改为 cookiePathRewrite:{‘/项目名/’:‘’},若没有path：这个参数，那么代码为cookiePathRewrite:{‘/项目名/’:‘’}即可
3、到api文件内，也就是你封装get、post 以及响应拦截器的http.js页面中编辑。
主要是：加上一下代码
const devBase = ‘/api’
const prodBase = ‘’
const baseURL = process.env.NODE_ENV === ‘development’?devBase:prodBase;
axios.defaults.baseURL = baseURL

然后重新运行项目，Set-Cookie中值就到了浏览器Application的cookies中，以后发送的请求就都会带着cookie请求。