什么是 CORS，怎么解决 CORS 错误
What is CORS and how to solve the CORS error
一句话：浏览器的同源策略默认禁止页面读取 跨源响应；CORS 是服务器通过响应头「授权」某些跨源请求的机制。
三条最关键的认知（这才是区分度）：
- 是浏览器在拦，不是服务器拒绝。请求通常已经发出去了、 服务器也已经处理了—— 只是浏览器不让 JS 读响应。所以看到 CORS 错误不等于接口没执行（非幂等接口尤其要注意， 可能已经创建了数据）。
- 所以前端改不了。必须服务端加响应头， 或者走代理。在前端加什么请求头都没用。
- 同源 = 协议 + 域名 + 端口 三者全同。
http和https不同源，3000和3001不同源。
简单请求 vs 预检请求：GET / HEAD /POST 且只用安全头、Content-Type 限于三种 （form-urlencoded、multipart/form-data、text/plain）→ 直接发。
其他情况先发一个OPTIONS 预检。注意 application/json就会触发预检—— 这就是为什么「明明是 POST 却多了一个 OPTIONS 请求」。
四种解法：
- 服务端加头（正解）——
Access-Control-Allow-Origin， Express 里app.use(cors())。 - 开发时用 dev server 代理—— Vite 的
server.proxy， 让浏览器以为是同源。 - 生产用同源部署或网关—— 前端和 API 挂在同一个域下的不同路径。
- （历史方案）JSONP —— 只支持 GET，已淘汰。
会追问：「要带 cookie 怎么办？」—— 前端 credentials: "include"， 服务端 Allow-Credentials: true，而且此时Allow-Origin不能是 *，必须写具体域名。 这是最常见的「配了 cors 还是不行」的原因。
「预检能缓存吗？」——Access-Control-Max-Age， 避免每个请求都多一次往返。
In one line: the browser’s same-origin policy stops a page from reading a cross-origin response by default; CORS is the mechanism by which the server uses response headers to authorise some of those requests.
Three things to understand — this is what separates people:
- The browser blocks it; the server did not refuse. The request usually went out and the server usually handled it — the browser just will not let your JS read the response. So a CORS error does not mean the endpoint did not run. Watch out with non-idempotent endpoints: the record may already exist.
- Which is why the front end cannot fix it. The server has to send the headers, or you go through a proxy. No request header you add on the client will help.
- Same origin means scheme, host and port all match.
httpandhttpsare different origins;3000and3001are different origins.
Simple requests vs preflighted ones: GET / HEAD / POST with only safe headers and a Content-Type limited to three values (form-urlencoded, multipart/form-data, text/plain) go straight out.
Anything else sends an OPTIONS preflight first. Note that application/json triggers a preflight — that is why “it is a POST but I see an extra OPTIONS request”.
Four ways to fix it:
- Send the headers from the server (the real fix) —
Access-Control-Allow-Origin, orapp.use(cors())in Express. - Proxy through the dev server while developing — Vite’s
server.proxy, so the browser thinks it is same-origin. - In production, deploy same-origin or put a gateway in front — front end and API on the same domain, different paths.
- (Historical) JSONP — GET only, obsolete.
Follow-up: “What if I need to send cookies?” — credentials: "include" on the client, Allow-Credentials: true on the server, and at that point Allow-Origin cannot be * — it must name the origin. This is the most common reason for “I configured cors and it still does not work”.
“Can the preflight be cached?” — Access-Control-Max-Age, so you do not pay a round trip per request.