场景:后端为老项目,无法修改cookie内容,由于浏览器同源策略,导致cookie无法被保留下来,通过配置代理并且重新设置请求头属性即可解决
server: {
proxy: {
"/h5api": {
target: "http://192.168.0.1:8080", // 实际代理后端地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/h5api/, ""),
configure: (proxy, options) => {
proxy.on("proxyRes", (proxyRes, req, res) => {
const setCookie = proxyRes.headers["set-cookie"];
if (setCookie) {
proxyRes.headers["set-cookie"] = setCookie.map((cookie) => {
cookie = cookie.replace(/;\s*Path=[^;]*/gi, "");
// 确保cookie包含SameSite=None和Secure属性
if (!cookie.includes("SameSite=")) {
cookie += "; SameSite=None";
}
if (!cookie.includes("Secure")) {
cookie += "; Secure";
}
return cookie;
});
proxyRes.headers["Access-Control-Allow-Origin"] = "localhost:5173";
proxyRes.headers["Access-Control-Allow-Credentials"] = "true";
}
});
},
},
},
},
后端cookie仅设置了JSESSIONID和path,通过配置代理解决跨域使用cookie问题