深入浅出，剖析 JavaScript 中鲜为人知的 CORS 通信

前言

在当今相互关联的网络世界中，应用程序经常需要跨越不同的域或子域获取资源。然而，出于安全考虑，浏览器对跨域请求施加了限制，称为同源策略。同源策略规定，脚本只能与来自相同源（协议、主机和端口）的服务器交互。

为了克服这种限制，引入了跨域资源共享（CORS），它是一种机制，允许不同源之间的浏览器和服务器安全地交换资源。本文将深入剖析 JavaScript 中 CORS 通信，揭示其鲜为人知的一面。

CORS 的工作原理

CORS 是一种浏览器端的机制，允许服务器指示浏览器是否允许跨域请求。通过使用特定的 HTTP 头，服务器可以指定哪些域可以访问其资源，以及这些请求可以执行哪些操作。

当浏览器发出跨域请求时，它首先会发送一个预检请求（OPTIONS 请求）到目标服务器。预检请求询问服务器是否允许该请求，以及请求中允许包含哪些头和方法。

服务器根据其 CORS 策略返回预检响应。如果服务器允许该请求，它将在响应中包含适当的 HTTP 头，例如 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods。

HTTP 头详解

CORS 通信涉及使用以下重要的 HTTP 头：

• Access-Control-Allow-Origin: 指定允许访问该资源的域。
• Access-Control-Allow-Methods: 指定允许用于跨域请求的方法。
• Access-Control-Allow-Headers: 指定允许在跨域请求中包含的请求头。
• Access-Control-Allow-Credentials: 指定是否允许在跨域请求中发送凭证（例如 Cookie）。
• Access-Control-Max-Age: 指定预检请求的缓存时间，以秒为单位。
• Access-Control-Expose-Headers: 指定在响应中可以暴露给跨域请求者的响应头。

凭证的处理

CORS 允许在跨域请求中发送凭证，例如 Cookie 和 HTTP 身份验证凭据。但是，由于安全原因，凭证的处理受到限制。

当 Access-Control-Allow-Credentials 头设置为 true 时，跨域请求可以携带凭证。但是，浏览器只会发送凭证，如果请求来自同一个域，并且请求的方法是 GET、HEAD、POST 或 OPTIONS。

预检请求

预检请求是 OPTIONS 请求，用于在实际跨域请求之前检查服务器是否允许该请求。预检请求使用以下 HTTP 头：

• Origin: 请求的源域。
• Access-Control-Request-Method: 请求中使用的 HTTP 方法。
• Access-Control-Request-Headers: 请求中包含的请求头。

服务器根据其 CORS 策略返回预检响应，指示是否允许该请求。如果允许，它将包含适当的 HTTP 头，并且实际请求将被允许进行。

代理服务器

代理服务器可以用来绕过 CORS 限制。代理服务器充当客户端和服务器之间的中介，接收客户端请求，然后代表客户端向服务器发出请求。

使用代理服务器时，跨域请求会首先发送到代理服务器。代理服务器然后向目标服务器发出请求，并将其响应转发给客户端。由于请求是由代理服务器发出的，因此它不会受到 CORS 限制。

最佳实践

以下是一些在 JavaScript 中使用 CORS 通信的最佳实践：

• 明确指定 CORS 头，以避免意外的跨域限制。
• 仅在需要时发送凭证，以提高安全性和性能。
• 使用预检请求来优化跨域请求的性能。
• 考虑使用代理服务器来解决复杂或受限制的 CORS 配置。

结语

通过掌握 JavaScript 中 CORS 通信的精髓，您可以克服跨域限制，构建健壮可靠的应用程序。本文为您提供了一个全面而深入的指南，帮助您了解 CORS 的工作原理、涉及的 HTTP 头以及处理凭证、预检请求和代理服务器的最佳实践。掌握这些知识将使您能够在 Web 开发中游刃有余，建立无缝的跨域交互。