了解 CORS 在 Web 浏览器中的工作原理

跨源资源共享 (cors) 是 web 浏览器中的一项重要安全功能，它控制 web 应用程序如何从与提供初始网页的域不同的域请求资源（例如数据、图像或脚本） 。它的主要目的是保护用户免受试图访问其他网站上敏感信息的恶意网站的侵害。本博客将解释 cors 的工作原理以及为什么它对于 web 开发至关重要。
什么是 cors？
简单来说，cors 是一种浏览器机制，用于控制网页可以从不同域请求哪些资源。默认情况下，浏览器实施同源策略 (sop)，该策略限制网页向加载页面以外的域发出请求。此策略是一项基本安全功能，可防止网站之间潜在的有害交互。

但是，在很多情况下，合法的跨源请求是必要的，例如，当 web 应用程序需要从托管在不同服务器上的 api 获取数据时。 cors 通过允许服务器指定允许哪些域访问其资源，以安全的方式启用此类请求。

cors 如何运作？
cors 的工作原理是向服务器的响应添加 http 标头，指示是否允许跨源请求。以下是 cors 运作方式的逐步细分：

客户提出请求
当网页尝试向不同来源（由域、协议和端口定义）发出请求（例如，通过 xmlhttprequest、fetch 或脚本包含）时，浏览器会检查该请求是否违反同源策略。

cors 预检请求（对于复杂请求）
某些请求，特别是那些使用 put、delete 或自定义标头等方法的请求，被认为是“复杂的”。在发送实际请求之前，浏览器会发送一个 options 请求，称为预检请求。此预检请求询问服务器是否允许实际请求并验证允许的 http 方法、标头和来源。

服务器使用 cors 标头进行响应
接收预检或实际请求的服务器发回带有特定标头的响应，指示该请求是否被允许。关键标头包括：

access-control-allow-origin：此标头指定允许哪些域访问该资源。如果此标头包含请求的来源，则浏览器允许响应。例如，服务器可能会响应：

access-control-allow-origin: https://example.com

access-control-allow-methods：此标头指定服务器允许跨源请求的 http 方法（get、post、put 等）。

access-control-allow-methods: get, post

access-control-allow-headers：指定实际请求中可以包含哪些自定义标头。

access-control-allow-headers: content-type, authorization

access-control-allow-credentials：如果服务器允许凭据（cookie、http 身份验证），则将包含此标头并设置为 true。

浏览器决定
收到服务器的响应后，浏览器评估标头。如果服务器通过适当的 cors 标头授予权限，浏览器将允许跨源请求并处理响应。如果不是，浏览器会阻止请求，网页无法访问该资源。

简单 cors 请求示例
考虑这样一个场景：https://example.com 上托管的网页尝试向 https://api.example.com/data 托管的 api 发出 get 请求。

fetch('https://api.example.com/data')  .then(response => response.json())  .then(data => console.log(data))  .catch(error => console.error('error:', error));

在这种情况下，浏览器将请求发送到 https://api.example.com。如果 api 服务器配置为允许来自 https://example.com 的请求，它将使用标头进行响应：

access-control-allow-origin: https://example.com

如果标头缺失或不正确，浏览器将由于 cors 政策而阻止响应。

cors 预检示例
对于更复杂的请求，浏览器会发起预检请求，检查是否允许跨域请求。以下是触发预检的 put 请求示例：

fetch('https://api.example.com/update', {  method: 'put',  headers: {    'content-type': 'application/json'  },  body: json.stringify({ key: 'value' })});

浏览器发送如下所示的 options 请求：

options /update http/1.1origin: https://example.comaccess-control-request-method: putaccess-control-request-headers: content-type

服务器应响应标头，指示是否允许此请求：

Access-Control-Allow-Origin: https://example.comAccess-Control-Allow-Methods: PUTAccess-Control-Allow-Headers: Content-Type

如果这些标头存在且有效，浏览器将继续执行实际的 put 请求。

cors 的重要性
cors 是一项安全功能，为 web 服务器提供细粒度的机制来控制对其资源的访问。如果没有 cors，恶意网站可以在未经用户同意的情况下轻松从其他域获取敏感数据，从而导致跨站请求伪造 (csrf) 等安全漏洞。

结论
了解 cors 对于使用 api 和第三方资源的 web 开发人员至关重要。通过在服务器上配置适当的 cors 策略，开发人员可以确保其应用程序保持安全，同时仍然启用合法的跨域交互。

如果您正在开发 web 应用程序并遇到 cors 错误，则必须检查服务器的配置并确保在响应中发送必要的标头。