跨域与 CORS：浏览器到底在拦什么

前端 localhost:3000 请求后端 localhost:4000 报 CORS 错误，是初学者必踩的坑。先纠正一个误解：请求其实发出去了，服务器也正常处理了，是浏览器拦下了响应。

同源策略

协议、域名、端口三者完全一致才叫同源。浏览器规定：跨源的 AJAX 请求，默认不允许读取响应。这是安全限制——防止恶意网站带着你的 Cookie 偷读银行网站的数据。

注意：<img>、<script src> 标签加载资源不受同源策略限制，这就是 JSONP 的原理（现在基本不用了）。

CORS：跨源资源共享

CORS 是 W3C 标准，思路是服务器主动声明哪些源可以访问。

简单请求（GET/POST/HEAD + 常见简单头）：浏览器直接发，服务器返回 Access-Control-Allow-Origin：

// Express 配置
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
res.setHeader('Access-Control-Allow-Credentials', 'true') // 允许带 Cookie

预检请求：当请求带自定义头（如 Authorization）、用 PUT/DELETE、Content-Type 为 application/json 时，浏览器会先发一个 OPTIONS 请求"探路"，服务器批准后才发真正的请求：

res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization')
res.setHeader('Access-Control-Max-Age', '86400') // 预检结果缓存一天

开发环境怎么办

• 让后端开 CORS（或用 cors 中间件）
• 用开发服务器的代理：Vite/Webpack 配置 server.proxy，把 /api 转发到目标服务器，浏览器看来是同源

生产环境前后端同域名部署（Nginx 反代），跨域问题自然消失。带 Cookie 的跨源请求，前端要设 credentials: 'include'，且 Allow-Origin 不能写 *，必须写明具体域名。