什么是 CORS？它是如何工作的？

CORS（跨域资源共享）是一项允许网站在浏览器的安全限制下共享资源的技术。它通过设置特定的 HTTP 头来控制跨域请求的权限。

前端安全 中等 HTTP CORS 跨域

CORS（Cross-Origin Resource Sharing）是一种基于 HTTP 头部规范的跨域资源共享机制，允许浏览器在遵守同源策略限制的前提下安全发起跨域请求。其主要目的是缓解由于浏览器的同源策略（Same-Origin Policy）导致的不同源间数据无法访问的问题。

  1. 简单请求的工作原理：
    当请求方法属于 GET、POST 或 HEAD，且 Content-Type 为 application/x-www-form-urlencoded, multipart/form-data 或 text/plain 时，浏览器会在发送请求时自动添加 Origin 头指明源： 
    GET /api/data HTTP/1.1
Origin: https://yourdomain.com
Host: target-api.com

    服务器根据预设策略响应包含 Access-Control-Allow-Origin 头以允许/拒绝此源；若匹配则响应被放行。

  2. 预检请求的工作原理：
    若请求涉及非简单方法（如 PUT、DELETE）、自定义头部（如 X-Requested-With）或异常字段，浏览器会首先发送一个 OPTIONS 请求作为“预检请求”： 
    OPTIONS /api/data HTTP/1.1
Origin: https://yourdomain.com
Access-Control-Request-Method: DELETE

    服务器需返回类似以下响应以明确许许可策略：

    HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Methods: GET, POST, DELETE
Access-Control-Max-Age: 86400
Access-Control-Allow-Headers: X-PINUSCODE, Content-Type

    浏览器基于上述头部进行访问判断；仅在响应符合时可执行正式请求。

  3. 核心CORS 响应头说明：
    • Access-Control-Allow-Origin：指定允许请求源的域名（*代表所有源）；必须设置才能授权数据共享。
    • Access-Control-Allow-Methods：允许使用的 HTTP 方法（如 GET、PUT）；为复杂请求必须包含的键值。
    • Access-Control-Allow-Headers：允许包含在请求头中的自定义字段名（如 Authorization、自定义 header）；避免跨头冲突关键点。
    • Access-Control-Max-Age：表示在何时重新发起预检请求的最大时间（单位秒）；减少无效多次轮询频率方法之一。
    • Access-Control-Allow-Credentials:设置成 true才将 cookies、headers、authorization等携带到相关服务器允许跨域发送凭证凭证控制字段关键点。若值为 include则使用包括 credential等发送支持功能字段相关关键字段点。

对于开发者通常在服务器配置实现 CORS 策略典型解决方案:

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  if (req.method === "OPTIONS") next();  //针对请求选项处理关键实现
});
//代码示例来源实践: Node.js Express 配置

此外作为浏览器机制一部分实际开发中可在前端代理框架实现类似思路策略调整。例如采用 Nginx做路由处理反向优化访问目标安全部署设置权限控制点解决场景优化方法框架调整支持相关方法参考实现。