菜鸟教程
Reference HTTP reference

CORS 参考

CORS（Cross-Origin Resource Sharing）是浏览器用来限制和放行跨源 HTTP 请求的机制。它不是服务端请求限制，而是浏览器读取响应前做的安全检查。

什么时候会遇到 CORS

当前端页面和接口不在同一个源时，就可能触发 CORS：

text 
页面：https://www.example.com
接口：https://api.example.com

协议、域名、端口任意一个不同，都是不同源。

常见响应头

http 
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

简单请求与预检请求

  • 简单请求：满足特定方法和 Header 限制，浏览器直接发送真实请求。
  • 预检请求：浏览器先发送 OPTIONS，确认服务端是否允许真实请求。

常见触发预检的原因：

  • 使用 PUT、PATCH、DELETE 等方法。
  • 带 Authorization 等非简单请求头。
  • Content-Type 不是简单类型。

fetch 示例

js 
const res = await fetch("https://api.example.com/data", {
  credentials: "include",
});

如果要带 Cookie，服务端不能使用 Access-Control-Allow-Origin: *，必须返回明确 origin，并设置 Access-Control-Allow-Credentials: true。

常见错误

  • 只改前端 mode: "no-cors"，结果拿到 opaque response，仍然读不到响应内容。
  • 带 Cookie 时服务端返回 Access-Control-Allow-Origin: *。
  • 预检 OPTIONS 没有被服务器或网关正确响应。
  • 实际接口返回 500，但浏览器只显示 CORS 错误，需要同时看 Network 里的预检和真实请求。

相关内容

相关内容