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

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

一、背景
二、同源策略
- [2.1 同源策略的核心](#2.1 同源策略的核心)
- - [2.1.1 请求url](#2.1.1 请求url)
  - [2.1.2 请求头](#2.1.2 请求头)
- [2.2 跨域问题的几个关键点](#2.2 跨域问题的几个关键点)
三、处理方案

一、背景

后端SpringBoot

前端VUE

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

二、同源策略

2.1 同源策略的核心

2.1.1 请求url

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

2.1.2 请求头

请求头中的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请求（预检请求），以检查服务器是否允许该跨域请求。

如果预检请求失败，浏览器会阻止实际请求。

三、处理方案

在生产环境下，最佳处理方案就是nginx代理
在开发环境中，最佳方案就是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，保证同源
使用vue的proxy代理请求，后端完全不需要配置CORS相关策略，直接使用即可

vue.config.js配置如下

javascript 复制代码

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
      }
    }
  }
};