JavaScript 中 CORS (Cross-Origin Resource Sharing) 的原理是什么？

推荐答案

CORS（跨域资源共享）是一种机制，允许网页从不同的域（即不同的源）请求资源。它通过使用额外的 HTTP 头来告诉浏览器，允许某个网页从不同的源访问资源。

关键点：

1. 同源策略：浏览器默认遵循同源策略，即只允许网页从同一个源（协议、域名、端口）请求资源。
2. CORS 头：服务器可以通过设置特定的 HTTP 头（如 Access-Control-Allow-Origin）来允许跨域请求。
3. 预检请求：对于某些类型的请求（如带有自定义头的请求），浏览器会先发送一个 OPTIONS 请求（预检请求）来确认服务器是否允许跨域请求。

示例代码：

// 服务器端设置 CORS 头
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有域访问
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

本题详细解读

1. 同源策略

同源策略是浏览器的一种安全机制，用于防止恶意网站窃取数据。它限制了网页只能从同一个源（协议、域名、端口）请求资源。如果尝试从不同的源请求资源，浏览器会阻止该请求。

2. CORS 的工作原理

CORS 通过在 HTTP 请求和响应中添加特定的头来绕过同源策略的限制。以下是 CORS 的工作流程：

• 简单请求：对于简单的请求（如 GET 或 POST 请求，且没有自定义头），浏览器会直接发送请求，并在请求头中添加 Origin 字段。服务器可以通过响应头 Access-Control-Allow-Origin 来允许或拒绝该请求。

• 预检请求：对于复杂的请求（如带有自定义头的请求或 PUT/DELETE 请求），浏览器会先发送一个 OPTIONS 请求（预检请求）来确认服务器是否允许跨域请求。服务器可以通过响应头 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 来指定允许的请求方法和头。

3. CORS 头的含义

• Access-Control-Allow-Origin：指定允许访问资源的域。可以设置为 * 表示允许所有域访问，或者指定特定的域。
• Access-Control-Allow-Methods：指定允许的 HTTP 方法（如 GET、POST 等）。
• Access-Control-Allow-Headers：指定允许的请求头（如 Content-Type、Authorization 等）。
• Access-Control-Allow-Credentials：指定是否允许发送凭据（如 cookies）。

4. 实际应用

在实际开发中，CORS 常用于前后端分离的架构中。前端应用通常运行在一个域（如 http://localhost:3000），而后端 API 运行在另一个域（如 http://api.example.com）。通过配置 CORS，前端应用可以安全地访问后端 API 的资源。