CORS到底是怎么工作的？

CORS到底是怎么工作的？——深入解析跨域资源共享机制

CORS（跨域资源共享，Cross-Origin Resource Sharing） 是一种基于 HTTP 头的安全机制，允许或限制网页从不同的域请求资源（如脚本、样式表、图片等），它通过服务器与浏览器之间的协作，解决了浏览器同源策略带来的跨域限制问题，CORS到底是怎么工作的？本文将详细解析其核心流程与关键机制。

CORS到底是怎么工作的？

为什么需要 CORS？

出于安全考虑，浏览器默认采用“同源策略”，即只允许网页请求与自身同源（协议、域名、端口均相同）的资源，现代 Web 应用常需调用第三方 API 或加载跨域内容，例如前端应用访问不同后端服务的接口，CORS 的出现，正是为了在保障安全的前提下,实现可控的跨域资源访问。

CORS 的核心工作流程

CORS 的实现依赖于服务器与浏览器的交互,主要分为以下两种情况：

简单请求（Simple Request）
若请求满足以下条件，浏览器会直接发送跨域请求，并在响应中检查 CORS 头：
- 方法为 GET、POST 或 HEAD；
- 仅使用安全的首部字段（如 Accept、Content-Type 等）；
- 若为 POST，Content-Type 仅限 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
流程：
- 浏览器发送请求时，自动添加 Origin 头，声明请求来源（如 https://example.com）。
- 服务器响应中需包含 Access-Control-Allow-Origin 头，明确允许的源（如或具体域名）。
- 若响应头匹配，浏览器允许访问资源；否则拦截响应。
预检请求（Preflight Request）
若请求不满足简单请求条件（如使用自定义头或 PUT/DELETE 方法），浏览器会先发送 OPTIONS 方法的预检请求，确认服务器是否允许实际请求。

流程：
- 浏览器发送 OPTIONS 请求，携带 Origin 和 Access-Control-Request-Method（实际请求方法）等头。
- 服务器响应需包含以下头以允许跨域：
  - Access-Control-Allow-Origin: 允许的源；
  - Access-Control-Allow-Methods: 允许的 HTTP 方法；
  - Access-Control-Allow-Headers: 允许的自定义头（如 Authorization）。
- 若预检通过，浏览器发送实际请求；否则直接拒绝。

CORS 的关键响应头

服务器通过以下 HTTP 头控制 CORS 行为：

Access-Control-Allow-Origin：指定允许访问的源，可用表示允许所有（不推荐用于敏感数据）。
Access-Control-Allow-Credentials：若请求携带凭证（如 Cookies），需设为 true，且 Allow-Origin 不能为。
Access-Control-Expose-Headers：允许前端读取的额外响应头（默认仅开放简单头）。
Access-Control-Max-Age：预检请求结果的缓存时间（秒）,减少重复预检。

CORS 的安全性与注意事项

*避免滥用 `** 开放所有源（Access-Control-Allow-Origin: *`）可能引发数据泄露风险,建议仅允许必要域名。
凭证与 Cookies
若需传递 Cookies 或 HTTP 认证信息，需：
- 设置 withCredentials: true（前端）；
- 服务器响应包含 Access-Control-Allow-Credentials: true，且 Allow-Origin 为具体域名。
服务器端配置
CORS 需服务器明确配置响应头,仅依赖前端无法绕过限制。