处理 CORS

如果你是一名 Web 开发者，CORS 可能就像一个反复出现的幽灵，每隔一个项目就会出现一次，耗费你整整一周的时间。在最近一次与它搏斗之后，我想写一本关于常见场景、陷阱和解决方法的手册。希望它能对你有所帮助！

跨域资源共享 (CORS) 是由 Web 浏览器强制执行的一种安全措施，它会影响从 Web 浏览器对远程资源（例如另一个 Web 域上的 API）的调用。

理解 CORS 的关键在于理解浏览器本身在阻止 CORS，而为了允许 CORS，服务器必须添加特殊的标头，以满足浏览器允许连接的要求。因此，CORS 阻止不会影响调用 API 的后端解决方案。

1. 简单请求

如果您只是执行 HTTP GET、HEAD 或 POST（没有自定义/外来的 HTTP 标头和“正常”内容类型），那么您就是在发出一个简单的请求。

这意味着不会进行“飞行前”选项检查。

简单的内容类型是：

• 应用程序/x-www-form-urlencoded
• 多部分/表单数据
• 文本/纯文本

小心application/json！

这里有一个很大的陷阱 - 如果您的 API 使用 JSON Content-Type: application/json（例如），那么这将被视为一种外来内容类型，并且您将受到预检 OPTIONS 请求的约束！

动图

我的电话其实很简单

好吧，在调用您想要的端点之后，例如https://coolapi.example.com/pets/，浏览器会检查响应是否包含一个Access-Control-Allow-Origin按名称列出您的站点或通过通配符暗示它的标题（即*）。

如果没有这样的标头，或者您的网站没有在该标头中提及，浏览器就会认为“好吧，这个 API 不应该从这里调用（也许是攻击者试图窃取用户信息）”，并阻止正在运行的 JavaScript 查看有关响应的任何详细信息，除了失败。浏览器中的 F12 开发者工具可以告诉开发者/用户发生了什么，但（潜在的恶意）脚本却被蒙在鼓里。

因此，为了允许任何网站调用您的 API，只要您不需要特殊标头或简单请求的 MDN 描述中提到的任何其他内容，您只需确保您的服务器返回上述Access-Control-Allow-Origin: *标头。

2. 复杂请求

复杂或“预检”请求是指具有额外标头或不寻常内容类型的请求，必须首先检查（由浏览器）以确定该请求是否可以安全发送。

当浏览器认为请求很复杂时，它会使用 HTTPOPTIONS动词提前调用服务器。

您的服务器不仅必须响应 OPTIONS 动词Access-Control-Allow-Origin，还必须响应其他标头，明确允许您在请求中预期的任何传入内容。例如，如果您预期一个标头被调用X-Secret-Allergies，那么您的服务器必须使用如下标头来响应 OPTIONS 调用：

Access-Control-Allow-Headers: X-Secret-Allergies

要允许不在上述“简单”列表中的内容类型，您必须明确将Content-Type标题添加到列表中Access-Control-Allow-Headers！

进一步的复杂化——Authorization标题和 cookie！

如果您的请求需要授权标头或某种类型的身份验证 Cookie，则不能在列表中使用通配符Allow-Origins！哎呀！您必须指定域名。我不知道人们在实际中是如何解决这个问题的，除非他们自己编写身份验证标头，或者在每个请求中都使用 RESTful 凭据。

如果您使用框架来抽象 HTTP 请求，例如 Axios、Angular$http或（咳咳）JQuery AJAX，那么您应该查找该withCredentials选项。将其设置为true表示您正在发送授权标头或身份验证 Cookie。因此，您无法使用通配符允许列表，而必须将其添加Authorization到您的Access-Control-Allow-Headers列表中。

3. 为什么？什么？为什么我得这么做？为什么——

这是我发现的对 CORS 阻止的攻击的最佳解释。

在我看来，CORS 本质上有助于保护用户免受恶意网站的侵害，这些网站试图从好网站加载资源，希望用户登录到好网站，以便他们的帐户信息可以被拉到这个恶意页面并发送到恶意服务器。

4. 测试工具

查看https://cors-tester.glitch.me/

可能有很多工具可用于测试 CORS，但我想将我的工具添加到其中。

这是一个托管在 Glitch 上的开源工具，它可以完全保护你的请求/响应的隐私；它们会直接从你的浏览器发送到你输入的任何 API。如果这还不够好，你甚至可以下载这两个文件，index.html只需在浏览器中打开即可在你的电脑上运行（无需本地服务器）。

5. 结束

我希望这篇文章和工具能够对您有所帮助。

在评论中告诉我你对 CORS 的噩梦！

最初发表于stegriff.co.uk