# CORS 参考

URL: https://caijiao.org/reference/http/cors
Source: docs/reference/http/cors.md
Description: CORS Reference，整理跨域请求、预检请求、Access-Control-Allow-Origin、credentials、常见报错和 fetch 调试方式。

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 里的预检和真实请求。

## 相关内容

- [HTTP Reference](/reference/http/)
- [HTTP Headers 总览](/reference/http/headers)
- [Fetch 如何处理 HTTP 错误](/how-to/javascript/handle-fetch-error)
- [Axios 网络错误和 CORS 怎么排查](/axios/troubleshooting/network-cors)
- [Nginx 教程](/nginx/)
- [MDN CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS)
- [MDN CORS errors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors)