前端与浏览器 / 进阶

CORS 与预检请求：浏览器到底在保护谁

从同源策略解释简单请求、OPTIONS 预检、凭据模式和常见响应头配置错误。跨域限制约束的是浏览器读取响应，不是阻止请求到达服务器。

8 分钟CORS · Preflight · Same Origin · Fetch

什么时候会预检

使用 PUT、PATCH、DELETE，设置 Authorization，或发送 application/json 等非简单头部时，浏览器通常先发 OPTIONS。预检携带 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers；服务端必须对这些能力明确回应。

查看失败的是 OPTIONS 还是实际请求；检查响应而不是请求里是否有允许头；确认代理和网关没有吞掉 OPTIONS；确认凭据请求的 Cookie SameSite 与 Secure 设置。

EXAMPLE / 01CORS

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PATCH
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 600
Vary: Origin

把实现拆成可验证的小块

预检是在发送实际请求前协商能力

最后回到真实页面检查

允许跨域不等于完成鉴权和 CSRF 防护