与CORS打交道
如果您是一名Web开发人员，那么CORS可能是一个反复出现的幻象，它会在每个其他项目中再次出现，以窃取整个一周的时间。经过最近的角力，我想写一本有关常见场景，陷阱和解决方法的剧本。希望对您有帮助
Ste Pammenter
@svenpam
CORS是我职业的祸根。
下午16:20-2019年4月10日
0
2
跨源资源共享（CORS）是由网络浏览器实施的一种安全措施，它会影响从网络浏览器到远程资源（如另一个网络域上的API）的调用。
理解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.复杂的请求
复杂或“预检”的请求是带有额外标题或异常内容类型的请求，必须首先（由浏览器）进行检查，以查明该请求是否可以安全发送。
当浏览器认为请求很复杂时，它将使用HTTP预先调用服务器 OPTIONS 动词。
您的服务器不仅必须使用匹配项来响应OPTIONS动词 Access-Control-Allow-Origin 但是带有其他标头，这些标头明确允许您在请求中期望任何传入的内容。例如，如果您希望标题为 X-Secret-Allergies 那么您的服务器必须使用以下标头来响应OPTIONS调用：
Access-Control-Allow-Headers: X-Secret-Allergies
要允许上面“简单”列表中没有的内容类型，您必须显式添加 Content-Type 列表中的标题 Access-Control-Allow-Headers
进一步的并发症- Authorization 标头和Cookie
如果您的请求需要一个Authorization标头或某种auth cookie，则不能为您使用通配符 Allow-Origins 列出 kes您必须指定域。我不知道人们是如何在野外解决这个问题的，除非可能是通过滚动自己的auth标头或在每次请求中执行一些RESTful凭据。
如果您使用的是框架来抽象HTTP请求，例如Axios，Angular $http或（咳嗽）JQuery AJAX，那么您应该寻找 withCredentials 选项。将其设置为true意味着您正在发送Authorization标头或auth cookie。因此，您不能有通配符允许列表，并且必须添加 Authorization 给你 Access-Control-Allow-Headers 清单。
3.为什么。什么。为什么我必须这样做。 Wh-
这是由我发现的CORS阻止的攻击的最佳解释。
在我看来，从本质上来说，CORS可以帮助保护用户免受恶意站点的攻击，这些站点试图从正常站点加载资源，希望用户登录到良好站点，以便将他们的帐户信息转移到该恶意页面上，并发送到邪恶的服务器。
4.测试工具
查看https://cors-tester.glitch.me/
那里可能有很多测试CORS的工具，但我想增加我的。
这是Glitch上托管的一个开源工具，可将您的请求/响应完全保密。它们会直接从浏览器转到您键入的任何API。如果这还不够好，您甚至可以下载这两个文件并运行 index.html 在您自己的PC上，只需在浏览器中打开它即可（无需本地服务器）
5.结束
希望本文和该工具对您有所帮助。
在评论中告诉我您的CORS噩梦
最初发布于stegriff.co.uk