【开发环境下浏览器前后端Cookie跨域问题】

一、背景

后端SpringBoot
前端VUE
跨域问题的核心在于浏览器的同源策略（Same-Origin Policy）

二、同源策略

2.1 同源策略的核心

2.1.1 请求url

1. 协议：请求的协议必须相同（如http和https）。
2. 域名：请求的域名必须相同（如example.com和sub.example.com）。
3. 端口：请求的端口必须相同（如80和443）。
4. 如果这三者中任何一个不同，浏览器就会认为这是一个跨域请求，并且会根据同源策略进行限制。

2.1.2 请求头

1. 请求头中的Host字段，Host字段用于指定请求的目标服务器的域名或IP地址，它在HTTP请求中是必须的。在跨域请求中，Host字段通常会被设置为目标服务器的域名。

2.2 跨域问题的几个关键点

浏览器会检查请求的源（协议、域名、端口）是否与目标源一致。
如果不一致，浏览器会阻止某些操作，如读取或修改目标源的资源。
CORS（跨源资源共享）：
后端服务器可以通过设置响应头来允许跨域请求。
常见的响应头包括：
Access-Control-Allow-Origin：指定允许访问的源。
Access-Control-Allow-Methods：指定允许的HTTP方法。
Access-Control-Allow-Headers：指定允许的请求头。
Access-Control-Allow-Credentials：是否允许发送Cookie。
预检请求（Preflight Request）：
浏览器在发送某些跨域请求之前，会先发送一个OPTIONS请求（预检请求），以检查服务器是否允许该跨域请求。
如果预检请求失败，浏览器会阻止实际请求。

三、处理方案

1. 在生产环境下，最佳处理方案就是nginx代理

2. 在开发环境中，最佳方案就是vue的proxy代理请求，通过配置vue.config.js，非常类似于nginx，效果如下：

   1. 前端运行为http://lcoalhost:8080。请求代理后端为：http://caasf.asf.com，此时无论如何调整后端的CORS，或者前端的跨域限制，总会因为cookie的domain或者其他限制导致浏览器无法存储cookie，或者存储了也无法使用
   2. 使用vue的proxy代理请求后，如果请求路径匹配代理配置中的路径（如/api），Vue开发服务器会将请求转发到指定的后端服务（http://caasf.asf.com）
   3. 在转发请求时，Vue开发服务器会修改请求的Host头
   4. 浏览器看到的请求是http://localhost:8080，且host也是localhost:8080，其他浏览器请求头都是localhost:8080，但实际最终请求到http://caasf.asf.com，而且返回的cookie domain也是localhost:8080，保证同源

3. 使用vue的proxy代理请求，后端完全不需要配置CORS相关策略，直接使用即可

vue.config.js配置如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://caasf.asf.com',changeOrigin: true}}}
};