CORS机制

CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种机制，用于在浏览器和服务器之间进行跨源 HTTP 请求的安全传输。它允许服务器在响应中设置特定的 HTTP 头部，以指示允许哪些源可以访问该资源，从而解决了浏览器的同源策略限制，实现了跨域通信。

为什么需要 CORS？

浏览器的同源策略限制了在不同源（协议、域名、端口）之间进行 XMLHttpRequest、Fetch 和 Web Socket 等 HTTP 请求。这种限制可以防止一些安全问题，例如跨站脚本攻击（XSS）。然而，它也限制了在网页上加载资源的自由，特别是在 Web 应用程序中，可能需要从其他源加载字体、CSS、JavaScript、图片或视频等资源。因此，CORS 机制被引入来解决这个问题。

如何工作？

1. 预检请求（Preflight Request）： 对于某些特殊的跨域请求，浏览器会首先发送一个 OPTIONS 请求（预检请求），以确定是否允许实际的请求。预检请求包含一个 Origin 头部，指示请求的来源，以及 Access-Control-Request-Method 和 Access-Control-Request-Headers 头部，用于指示实际请求将使用的方法和头部。

2. 服务器响应： 服务器在收到预检请求后，会根据请求头部中的 Origin、请求方法和请求头部等信息，判断是否允许该跨域请求。如果允许，服务器会在响应中添加相应的 CORS 头部，例如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers，指示允许哪些源、方法和头部进行访问。

3. 实际请求： 如果预检请求成功，浏览器会发送实际的跨域请求。在实际请求中，浏览器会自动添加 Origin 头部，指示请求的来源。服务器在收到实际请求后，会检查 Origin 头部，并根据 CORS 头部来决定是否接受请求。

CORS 相关的头部

• 请求头部：

  • Origin：指示请求的来源。
  • Access-Control-Request-Method：用于预检请求，指示实际请求将使用的方法。
  • Access-Control-Request-Headers：用于预检请求，指示实际请求将携带的头部。

• 响应头部：

  • Access-Control-Allow-Origin：指示允许访问资源的源，可以是具体的源，也可以是 * 表示允许所有源访问。
  • Access-Control-Allow-Methods：指示允许访问资源的方法。
  • Access-Control-Allow-Headers：指示允许访问资源的头部。
  • Access-Control-Allow-Credentials：指示是否允许发送凭证（如 cookies）。
  • Access-Control-Expose-Headers：指示哪些头部可以暴露给前端 JavaScript。

示例

假设有一个跨域请求，前端页面在 https://example.com，向后端 API 发起请求 https://api.example.com/data：

• 预检请求：

  OPTIONS /data HTTP/1.1
  Host: api.example.com
  Origin: https://example.com
  Access-Control-Request-Method: GET
  

• 预检响应：

  HTTP/1.1 204 No Content
  Access-Control-Allow-Origin: https://example.com
  Access-Control-Allow-Methods: GET, POST, PUT
  Access-Control-Allow-Headers: Content-Type, Authorization
  

• 实际请求：

  GET /data HTTP/1.1
  Host: api.example.com
  Origin: https://example.com
  

总结

CORS 是一种浏览器机制，用于解决跨域请求的安全问题。它通过在请求和响应中添加特定的 HTTP 头部，允许服务器声明哪些源可以访问资源，从而实现了跨源资源共享。理解 CORS 的工作原理和相关的头部，有