跨域是浏览器主动拦截不同源（协议、域名、端口任一不同）的响应，非后端拒绝或网络问题；常见于本地开发前后端端口不一致、调第三方API、CDN字体加载、子域名互通等场景，需后端正确配置CORS响应头，代理仅开发有效。

跨域就是浏览器不让你“随便串门”

跨域不是后端拒绝你，也不是网络不通——是浏览器在你发起请求后、收到响应前，主动把结果拦下来了。只要 协议、域名、端口 三者中任一不同，就算跨域。比如前端跑在 http://localhost:3000，却去调 http://localhost:8080/api/user，端口不一样，浏览器就认定这是“串门”，直接拦截响应体（哪怕后端已成功返回数据）。

哪些场景一写就报 CORS 错误？

这些是日常开发里最常踩坑的典型：

• 本地开发时前后端分离：vue-cli 启动在 :3000，Spring Boot 后端跑在 :8080
• 调用第三方 API：fetch('https://api.github.com/users') 从 http://127.0.0.1:5173 发起
• 静态资源加载出问题：CSS 里 @font-face 引了 CDN 字体，控制台报 Blocked loading resource from cross-origin URL
• 子域名互通失败：a.example.com 的 JS 尝试读取 b.example.com 的 localStorage 或发请求

CORS 响应头没配对，前端再怎么改都白搭

前端用 axios 或 fetch 加 { mode: 'cors' } 只是“申请通行”，真正决定能不能过的，是后端响应头里有没有 Access-Control-Allow-Origin。常见误区：

• 只加了 Access-Control-Allow-Origin: *，但请求带了 Credentials（比如 withCredentials: true），这时必须指定具体域名，不能用 *
• 漏配 Access-Control-Allow-Headers，比如前端发了 Authorization 或自定义 header，后端没声明允许，预检请求（OPTIONS）就会失败
• Spring Boot 3 默认禁用全局 CORS，光加 @CrossOrigin 注解到 Controller 不够，若要全接口生效，得显式配置 WebMvcConfigurer 或用 @Bean CorsConfigurationSource

代理只是开发阶段的“绕路技巧”，不是跨域解决方案

很多人以为 vite.config.ts 里配个 server.proxy 就算解决跨域了，其实这只是把请求路径重写成本地同源地址，骗过了浏览器。它只在开发服务器（如 vite dev server）生效，打包部署后就失效了。上线仍需后端配好 CORS，否则生产环境必挂。

真正容易被忽略的是：跨域限制只存在于浏览器环境。Node.js 脚本、curl、Postman 都不受影响——这说明问题永远在“谁在发请求”和“谁在接收响应”，而不是接口本身。