请解释 CORS 的原理及其配置方法。

推荐答案

CORS（跨源资源共享）是一种机制，允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS通过HTTP头来告诉浏览器允许哪些源访问资源。

配置方法

1. 服务器端配置：

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

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

   • 如果需要允许所有源访问，可以设置为*：

     Access-Control-Allow-Origin: *

   • 对于需要携带凭证（如cookies）的请求，服务器还需要设置：

     Access-Control-Allow-Credentials: true

   • 对于预检请求（OPTIONS），服务器需要响应以下头：

     Access-Control-Allow-Methods: GET, POST, PUT, DELETE
     Access-Control-Allow-Headers: Content-Type, Authorization

2. 客户端配置：

   • 在发送跨域请求时，如果需要携带凭证，需要在XMLHttpRequest或Fetch API中设置withCredentials为true：

     fetch('https://example.com/api', {
       credentials: 'include'
     });

本题详细解读

CORS的工作原理

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

预检请求（Preflight Request）

预检请求是浏览器在发送实际请求之前，先发送一个OPTIONS请求，询问服务器是否允许该跨域请求。服务器通过以下响应头来告知浏览器：

• Access-Control-Allow-Methods：允许的HTTP方法。
• Access-Control-Allow-Headers：允许的请求头。
• Access-Control-Allow-Origin：允许的源。

简单请求与复杂请求

• 简单请求：满足以下条件的请求被视为简单请求：

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

  简单请求不会触发预检请求。

• 复杂请求：不满足简单请求条件的请求被视为复杂请求，会触发预检请求。

携带凭证的请求

当跨域请求需要携带凭证（如cookies）时，服务器必须设置Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能为*，必须指定具体的源。

常见问题

• 跨域请求失败：通常是由于服务器未正确配置CORS头，或者客户端未正确设置withCredentials。
• 预检请求失败：可能是服务器未正确处理OPTIONS请求，或者未返回正确的CORS头。

通过正确配置CORS，开发者可以安全地实现跨域资源共享，提升Web应用的功能性和用户体验。