请解释 CORS (Cross-Origin Resource Sharing) 的原理和配置方法

推荐答案

CORS（跨域资源共享）是一种机制，允许浏览器向跨域服务器发送请求，并接收响应。它通过在HTTP头中添加特定的字段来实现跨域请求的权限控制。

配置方法

1. 服务器端配置：

   • 设置 Access-Control-Allow-Origin 头，指定允许访问的源。例如：

     Access-Control-Allow-Origin: https://example.com

   • 设置 Access-Control-Allow-Methods 头，指定允许的HTTP方法。例如：

     Access-Control-Allow-Methods: GET, POST, PUT

   • 设置 Access-Control-Allow-Headers 头，指定允许的请求头。例如：

     Access-Control-Allow-Headers: Content-Type, Authorization

   • 设置 Access-Control-Allow-Credentials 头，指定是否允许发送凭据（如cookies）。例如：

     Access-Control-Allow-Credentials: true

2. 客户端配置：

   • 在发送跨域请求时，浏览器会自动处理CORS相关的头信息。开发者只需确保请求的URL和服务器配置一致。

本题详细解读

CORS 的原理

CORS 的核心是通过HTTP头信息来控制跨域请求的权限。当浏览器检测到跨域请求时，会先发送一个预检请求（Preflight Request），服务器通过响应头告知浏览器是否允许该请求。

• 简单请求：如果请求满足以下条件，浏览器会直接发送请求，而不需要预检：

  • 使用 GET、POST 或 HEAD 方法。
  • 请求头只包含 Accept、Accept-Language、Content-Language、Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）。

• 预检请求：对于不满足简单请求条件的请求，浏览器会先发送一个 OPTIONS 请求，服务器通过响应头告知浏览器是否允许该请求。

配置示例

假设你有一个API服务器，允许 https://example.com 访问，并且允许 GET 和 POST 方法，配置如下：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true

注意事项

• Access-Control-Allow-Origin 不能设置为 * 当 Access-Control-Allow-Credentials 为 true 时。
• 预检请求会增加请求的延迟，因此应尽量减少不必要的预检请求。