数据与服务 · 网络与接口

跨域资源共享CORS

CORS 是浏览器执行的来源许可协议。简单请求直接校验响应，复杂请求先用 OPTIONS 预检；方法、请求头、来源和凭据必须在同一份可验证契约中对齐。

把响应头交给浏览器判定

CORS 不是前端发一个开关就能打开的通道。挑一个请求场景，调整服务端的 Access-Control-* 回答，再运行浏览器判定——观察「请求已到达服务端」和「脚本可读取响应」并不是同一件事。

GET/api/weatherOrigin: https://app.example.com

实际请求GET /api/weatherAccept: application/json

服务端响应头Access-Control-Allow-Origin: https://app.example.com脚本可读取？待判定

GET 只带 safelisted 请求头；浏览器直接发送实际请求，再检查响应中的许可。

调整服务端回答Allow-OriginOPTIONS 允许 GETOPTIONS 允许 Content-TypeAllow-Credentials: true

等待运行判定

先选请求场景、调整服务端回答，再运行浏览器判定。

对照规则：浏览器拿 Origin 提问，服务端用 Access-Control-* 回答；预检要答方法和请求头，凭据要回显明确来源。任一项缺失，浏览器都不把响应交给脚本。

键盘：Tab 进入场景，←/→ 或 Home/End 切换；表单控件和判定按钮均可用 Enter/Space 操作。

浏览器带着 Origin 提问，服务端用 Access-Control-* 回答，最后仍由浏览器决定脚本能否读取响应。把这份契约的字段和方向记清楚，调试时就知道该看哪一行。

方向字段示例浏览器如何使用

浏览器 → 服务端Originhttps://app.example.com浏览器标记脚本所在来源；脚本不能把它改成可信域名。

浏览器 → 服务端OPTIONSAccess-Control-Request-Method: POST非简单请求先询问方法和请求头是否被允许。

服务端 → 浏览器Access-Control-Allow-Originhttps://app.example.com响应中的来源必须匹配请求 Origin，或在无凭据时使用受控的 *。

服务端 → 浏览器Access-Control-Allow-Methods / HeadersPOST · Content-Type预检回答方法和非 safelisted 请求头；缺一项，实际请求不会继续。

浏览器判定Access-Control-Allow-Credentialstrue（仅凭据场景）凭据请求还要有 true，且 Allow-Origin 不能是 *；通过后脚本才读得到响应。

CORS 是浏览器执行的安全策略，不是前端能关闭的开关。先认出它，再到服务端写对响应头。

什么时候要管

控制台报 No 'Access-Control-Allow-Origin' 或 blocked by CORS policy，但用 curl/Postman 发同一请求能通——这是浏览器在拦截跨来源响应，不是服务端挂了。
跨来源（协议、主机或端口任一不同）的 fetch、XHR、读取像素的 <img>、@font-face 才受 CORS 约束；同源请求和「服务器到服务器」的调用不涉及。

怎么修

服务端响应写 Access-Control-Allow-Origin：优先明确来源白名单，无凭据时才可用受控的 *，并加 Vary: Origin 防缓存串用。
预检 OPTIONS 要回答 Access-Control-Allow-Methods 与 Access-Control-Allow-Headers，缺一项实际请求就不发。
带 Cookie 时回显明确 Origin 并加 Access-Control-Allow-Credentials: true；* 与凭据不能混用。

前端无法「关闭」CORS——它是浏览器策略。要么改服务端响应头，要么让前端走同源代理。

带 Cookie 的跨域请求最容易踩坑。把同一份 fetch 只改服务端 Allow-Origin 的写法，脚本能否读取响应就反转。

正例脚本可读取

Access-Control-Allow-Origin: https://app.example.com 配合 Access-Control-Allow-Credentials: true。来源回显 Origin、凭据显式允许，浏览器把响应交给脚本。

反例脚本读不到

Access-Control-Allow-Origin: * 与 credentials: 'include' 搭配。通配来源不能与凭据混用，浏览器拒绝把响应交给脚本——即使服务端已处理请求。

JSON POST 的 OPTIONS 响应漏掉 Access-Control-Allow-Headers: Content-Type 时，浏览器会怎样？

术语的技术定义和行为以这些一手或权威资料为准。

和本知识点经常一起出现的概念。