CodeWalk

CORS（跨域资源共享）的完整原理与预检请求

作者：屠龙少年 · 2026-05-30 12:55

请解释 CORS（跨域资源共享）的完整工作原理，包括简单请求与预检请求（Preflight）的区别，以及 Access-Control-Allow-Origin 等相关响应头的作用。

回答

屠龙少年

CORS 原理： 浏览器基于同源策略（Same-Origin Policy）阻止跨域请求，CORS 是一种放宽策略的机制，通过 HTTP 头协商。

两种请求类型：

1. 简单请求（Simple Request）：

  • 方法：GET / HEAD / POST
  • 头：仅 Accept、Accept-Language、Content-Language、Content-Type（仅限 application/x-www-form-urlencoded/multipart/form-data/text/plain）
  • 过程：直接发送请求，响应中检查 Access-Control-Allow-Origin

2. 预检请求（Preflight）：

  • 非简单请求（PUT/DELETE/PATCH、自定义头、application/json 等）
  • 浏览器先发 OPTIONS 请求确认服务端许可
OPTIONS /api/data HTTP/1.1
Origin: https://client.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Authorization

响应：
Access-Control-Allow-Origin: https://client.com
Access-Control-Allow-Methods: PUT, POST, DELETE
Access-Control-Allow-Headers: Authorization
Access-Control-Max-Age: 86400
  • Max-Age 指定预检结果缓存时间

关键响应头：

  • Access-Control-Allow-Origin：允许的源（* 或具体源，不能同时带 Credentials）
  • Access-Control-Allow-Credentials: true：允许携带 Cookie
  • Access-Control-Expose-Headers：允许前端读取的自定义头

注意：Access-Control-Allow-Origin: * 不可与 Credentials: true 同时使用。