【Node.js】详解 CORS 中的三个重要响应头

最新推荐文章于 2025-03-03 10:23:25 发布

Peter-Lu

最新推荐文章于 2025-03-03 10:23:25 发布

阅读量977

点赞数 19

分类专栏： # NodeJS 文章标签： node.js express 中间件 javascript 前端

本文链接：https://blog.youkuaiyun.com/lph159/article/details/142377654

版权

NodeJS 专栏收录该内容

38 篇文章

订阅专栏

CORS（跨域资源共享）是一个用于控制资源在不同域之间共享的安全机制。通过配置适当的响应头，服务器可以允许或限制外部域对资源的访问。本文将详细介绍 CORS 机制中的三个核心响应头：Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers，并结合实际案例，探讨它们在跨域请求中的作用和配置方法。

一、什么是 CORS

1. CORS 概述

CORS，全称为 Cross-Origin Resource Sharing，旨在解决浏览器的同源策略限制。同源策略只允许从同一域名、协议和端口请求资源，防止跨站脚本攻击（XSS）。然而，在实际开发中，前后端分离、第三方 API 请求等场景需要跨域资源共享。CORS 通过在响应头中加入特定的字段，允许服务器告诉浏览器哪些域可以访问资源，以及允许的请求方法和头部信息。

2. CORS 的工作流程

CORS 的请求分为两种类型：简单请求和预检请求。简单请求如 GET、POST，只有特定的头部；预检请求是浏览器发出的 OPTIONS 请求，提前询问服务器是否允许某种复杂请求（如 PUT、DELETE）。服务器通过设置 CORS 响应头来告诉浏览器跨域访问的权限。

二、CORS 中的三个重要响应头

1. `Access-Control-Allow-Origin`

Access-Control-Allow-Origin 是 CORS 中最重要的响应头，负责指定允许哪些域名可以访问服务器的资源。

1.1 响应头的作用

当浏览器发起跨域请求时，服务器需要在响应中包含 Access-Control-Allow-Origin 来表示允许的访问来源。浏览器会根据这个头部判断当前请求的来源是否被允许。

1.2 头部的值

具体的域名：例如 Access-Control-Allow-Origin: https://example.com，表示只有 https://example.com 这个域可以访问该资源。
通配符 \*：表示允许所有域访问资源，即不进行任何限制。但需要注意的是，使用通配符时，不允许携带凭证（如 cookies 和 HTTP 认证信息）。

1.3 配置示例

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

在这个配置中，只有 https://example.com 域名可以跨域访问服务器资源，其他任何域名的请求都会被拒绝。

1.4 安全性考虑

使用 * 来允许所有域访问虽然方便，但存在安全隐患，可能导致敏感数据泄露。在处理涉及认证信息的请求时，应避免使用通配符，改为明确指定允许的域名。

2. `Access-Control-Allow-Methods`

Access-Control-Allow-Methods 响应头用于指定服务器允许客户端在跨域请求中使用的 HTTP 方法。

2.1 响应头的作用

当客户端发起跨域请求，尤其是 OPTIONS 预检请求时，浏览器会询问服务器是否允许特定的 HTTP 方法（如 GET、POST、PUT、DELETE）。服务器通过 Access-Control-Allow-Methods 来明确告知客户端可以使用哪些方法。

2.2 头部的值

该头部可以包含一个或多个 HTTP 方法，常见的值包括：

GET：允许获取资源。
POST：允许向服务器提交数据。
PUT：允许更新资源。
DELETE：允许删除资源。
OPTIONS：预检请求的默认方法。

例如：

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

表示服务器允许客户端使用 GET、POST 和 PUT 方法进行跨域请求。

2.3 配置示例

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

在这个配置中，客户端可以使用 GET、POST 和 DELETE 方法进行跨域请求，而任何其他方法（如 PUT）将被服务器拒绝。

2.4 常见问题

如果客户端试图使用一个未被允许的方法（如 PATCH），请求将被浏览器拦截，并显示一个跨域错误。因此，确保在响应头中列出所有需要支持的方法非常重要。

3. `Access-Control-Allow-Headers`

Access-Control-Allow-Headers 响应头用于指定服务器允许客户端在跨域请求中使用的自定义头部。

3.1 响应头的作用

客户端可以在跨域请求中添加自定义头部（如 X-Custom-Header），但这些头部不会被默认允许。通过 Access-Control-Allow-Headers，服务器可以指定哪些自定义头部可以被使用。

3.2 头部的值

该头部可以包含多个自定义头部，或者允许特定的标准头部。常见的值包括：

Content-Type：指定请求的内容类型。
Authorization：用于携带认证信息的头部。
X-Requested-With：通常在 AJAX 请求中使用，标识 XMLHttpRequest 对象。

例如：

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

表示服务器允许 Content-Type 和 Authorization 头部的跨域请求。

3.3 配置示例

Access-Control-Allow-Headers: X-Custom-Header, Authorization

在这个配置中，客户端可以使用 X-Custom-Header 和 Authorization 头部进行跨域请求。

3.4 预检请求中的作用

当客户端在预检请求中添加自定义头部时，服务器必须在响应中明确允许这些头部，否则请求将被浏览器阻止。

3.5 自定义头部的限制

为了安全起见，浏览器会默认阻止一些潜在危险的自定义头部，如 X-HTTP-Method-Override。如果需要使用这些头部，必须在 Access-Control-Allow-Headers 中明确列出。

三、CORS 响应头的实际应用场景

1. 前后端分离的应用

在前后端分离的架构中，前端通常运行在一个域名下，而后端 API 则部署在不同的域名。这种情况下，CORS 响应头的正确配置至关重要。例如：

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

此配置允许前端 https://frontend.example.com 对后端发起跨域请求，并使用 GET 和 POST 方法。

2. 第三方 API 的调用

当应用程序需要调用第三方 API（如 Google Maps 或 Stripe）时，必须确保目标 API 配置了正确的 CORS 响应头。例如，Google Maps API 允许通配符 * 来广泛支持跨域访问，但不允许携带凭证。

3. 携带凭证的请求

如果请求需要包含 cookies 或其他认证信息，必须设置 Access-Control-Allow-Origin 为具体的域名，并添加 Access-Control-Allow-Credentials 头部：

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

四、总结

通过正确理解和使用 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 这三个核心 CORS 响应头，开发者可以有效地控制跨域资源共享，确保系统的安全性与灵活性。在前后端分离和第三方 API 调用的场景中，CORS 配置显得尤为重要，合理设置这些响应头不仅能提升用户体验，还能防止潜在的跨域攻击。希望本文能帮助你更好地理解和配置 CORS 响应头。