本文目录
什么是 CORS？
跨源资源共享（CORS）是一种浏览器安全机制，用于控制哪些网络源可以访问你服务器上的资源。默认情况下，浏览器会强制执行同源策略，阻止 JavaScript 向不同的域名、端口或协议发起请求。
CORS 头会告知浏览器允许哪些跨源请求。如果没有正确的头，从某个域名上的前端向另一个域名上的后端发起的 API 调用就会因 CORS 错误而失败。CORS 头生成器能为你的服务器配置创建正确的 Access-Control-Allow-* 头。
CORS 头的工作原理
CORS 通过服务器发送的一组 HTTP 响应头来运作，这些头指明了跨源请求所允许的源、方法和请求头。
- Access-Control-Allow-Origin——指定哪些源可以访问该资源（某个特定域名，或用 * 表示任意源）
- 预检请求——对于非简单请求，浏览器会先发送一个 OPTIONS 请求，以检查实际请求是否被允许
- 凭据处理——Access-Control-Allow-Credentials: true 允许携带 Cookie 和认证头，但要求指定具体的源（而非通配符 *）
免费试用 —— 无需注册
生成 CORS 头 →何时需要配置 CORS
只要你的前端和后端来自不同的源，就需要配置 CORS。
- API 开发——被不同域名前端应用访问的 REST 或 GraphQL API 需要 CORS 头
- CDN 配置——从 CDN 子域名提供静态资源时，字体文件和 API 请求需要 CORS
- 微服务——本地开发时运行在不同端口上的服务，需要 CORS 才能通过浏览器相互通信
常见问题
为什么不能对所有情况都直接使用 Access-Control-Allow-Origin: *？
通配符 * 允许任意源，这对公开 API 没问题。然而，它无法与凭据（Cookie、Authorization 头）一起使用。如果你的 API 需要身份验证，就必须指定确切的源。通配符还会禁用其他 CORS 特性，例如暴露自定义响应头。
什么是预检请求？
预检是浏览器在实际请求之前自动发送的一个 HTTP OPTIONS 请求。它会检查服务器是否允许该方法、请求头和源。当请求带有自定义头、使用 GET/POST/HEAD 以外的方法，或 Content-Type 值超出表单默认范围时，就会触发预检。
如何修复“No Access-Control-Allow-Origin header”错误？
在服务器的响应中添加 Access-Control-Allow-Origin 头，并填入发起请求的源域名。Express 可使用 cors 中间件，Nginx 可添加 add_header 指令，Apache 可使用 Header set 指令。确保该头同时出现在预检 OPTIONS 响应和实际响应中。