跨域是浏览器主动拦截不同源（协议、域名、端口任一不同）的响应，非后端拒绝或网络问题；常见于本地开发前后端端口不一致、调第三方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 都不受影响——这说明问题永远在“谁在发请求”和“谁在接收响应”，而不是接口本身。
