DR：在本文中，我们将研究CORS，在什么情况下需要它，它提供的好处，以及如何配置Node+Express应用程序来支持CORS。如果您愿意，可以从GitHub获取附带的源代码！Cross-Origin Resource Sharing（CORS）是一种协议，它允许在浏览器客户端上运行的脚本与来自不同来源的资源进行交互。这很有用，因为由于XMLHttpRequest和fetch后面使用的是同源策略，JavaScript只能调用与脚本运行位置位于同一原点上的url。例如，如果一个JavaScript应用程序希望对另一个域上运行的API进行AJAX调用，那么由于相同的源策略，它将被阻止这样做。但为什么这是必要的，它是如何工作的？"了解有关CORS的所有信息，简单请求和预处理请求之间的区别，以及如何将CORS支持添加到现有的Node Express应用程序中！"在推特上留言为什么需要它？大多数情况下，在用户浏览器中运行的脚本只需要访问同一个源上的资源（想想对最初为JavaScript代码提供服务的同一个后端的API调用）。因此，JavaScript通常不能访问其他来源的资源，这对安全性来说是件好事。在这种情况下，"其他来源"是指访问的URL与运行JavaScript的位置不同，因为它具有：不同的方案（HTTP或HTTPS）另一个领域另一个港口然而，在一些合理的情况下，跨源访问是可取的，甚至是必要的。例如，如果您正在运行一个React SPA，该SPA调用另一个域上运行的API后端。网络字体也依赖CORS来工作。想跟上OAuth2和OpenID连接的速度吗？下载免费电子书$（'.oauth oidc button a'）。单击（函数（e）{metricsLib.track('博客：点击：oauth2 oidc ad'）；});识别CORS响应当服务器被正确配置为允许跨源资源共享时，将包括一些特殊的头。它们的存在可以用来确定请求是否支持CORS。Web浏览器可以使用这些头来确定XMLHttpRequest调用是继续还是失败。可以设置一些标头，但确定谁可以访问资源的主要标题是access Control Allow Origin。此标头指定哪些源可以访问资源。例如，要允许从任何来源进行访问，可以按如下方式设置此标头：访问控制允许原点：*或者可以缩小到特定的来源：访问控制允许原点：https://example.com了解CORS请求类型CORS请求有两种类型："简单"请求和"飞行前"请求，由浏览器决定使用哪种请求。作为开发人员，在构造要发送到服务器的请求时，通常不需要关心这个问题。但是，您可能会看到不同类型的请求出现在您的网络日志中，而且，由于这可能会对应用程序的性能产生影响，因此了解这些请求的发送原因和时间可能会对您有所帮助。在接下来的几节中，我们将更详细地了解这意味着什么。简单请求（GET、POST和HEAD）当请求本身满足某一组要求时，浏览器将该请求视为"简单"请求：使用以下方法之一：GET、POST或HEAD使用CORS安全列表头使用Content-Type头时，只允许以下值：application/x-www-form-urlencoded、multipart/form data或text/plain没有在任何XMLHttpRequestUpload对象上注册事件侦听器请求中未使用ReadableStream对象如果满足这些条件，则允许请求继续正常运行，并在返回响应时检查accesscontrolalloworigin头。飞行前请求（选项）如果请求不符合简单请求的条件，浏览器将使用OPTIONS方法发出自动飞行前请求。此调用用于确定服务器的确切CORS功能，而服务器的CORS功能又用于确定预期CORS协议是否被理解。如果OPTIONS调用的结果指示无法发出请求，则不会执行对服务器的实际请求。飞行前请求将模式设置为选项，并设置两个标题，以描述接下来的实际请求：访问控制请求方法：请求的预期方法（例如GET或POST）访问控制请求标头：指示将随请求一起发送的自定义标头Origin：通常的Origin头，包含脚本的当前源此类请求的示例如下：#请求curl-i-X选项本地主机：3001/api/ping\-H'访问控制请求方法：GET'\-H'访问控制请求头：内容类型，接受'\-H'来源：：3000英尺这个请求基本上说"我想用内容类型发出一个GET请求，并接受来自：3000-有可能吗？"。服务器将在响应中包含一些访问控制-*头，以指示是否允许随后的请求。其中包括：Access Control Allow Origin：允许发出请求的源，或者*如果可以从任何源发出请求访问控制允许方法：允许的HTTP方法的逗号分隔列表访问控制允许标头：允许发送的自定义标头的逗号分隔列表Access Control Max Age：在进行另一个调用之前，可以缓存对飞行前请求的响应的最长持续时间然后浏览器将检查响应，以决定是继续请求还是放弃请求。因此，对前面示例的响应可能如下所示：HTTP/1.1 204无内容访问控制允许原点：*访问控制允许方法：GET、HEAD、PUT、PATCH、POST、DELETEVary:访问控制请求头访问控制允许标头：内容类型，接受内容长度：0日期：2019年4月5日星期五11:41:08 GMT连接：保持活动状态在本例中，Access-Control-Allow-Origin头允许从任何源发出请求，而Access-Control-Allow-Methods头只描述可接受的HTTP方法。如果给定的HTTP方法不被接受，它将不会出现在此列表中。在本例中，Access Control Allow Headers回显OPTIONS请求中请求的头。这表示允许发送所有请求的标头。例如，如果服务器不允许Accept报头，那么响应中将省略该报头，浏览器将拒绝该调用。如何将CORS添加到Nodejs Express应用程序中作为一个具体的例子，让我们使用一个现有的Node Express应用程序并对其进行修改以允许跨源JavaScript请求。您要使用的应用程序是使用Vue CLI 3创建的，运行在端口3000上，同时还有一个运行在端口3001上的Express服务器。Vue前端提供了一个用户界面，可以对服务器进行API调用，但不幸的是，这不能正常工作，因为服务器没有启用CORS。你会搞定的！首先，请在本地计算机上的某个位置查看教程存储库。以下命令将帮助您设置应用程序：#使用SSH克隆存储库git克隆git@github.com：auth0博客/express cors-演示.git#移到项目目录cd express cors演示#安装依赖项npm安装#运行应用程序npm运行开发现在打开网站：3000并单击"调用API"按钮。你应该会发现通话会失败。这是因为正在向位于的API发出请求：3001/api/ping，由于端口号不同，它与运行web应用程序的位置不同。因此，它构成一个跨源请求，默认情况下被浏览器阻止。从curl发出相同的请求，以确保不返回CORS头：卷曲-i本地主机：3001/api/pingHTTP/1.1 200行内容类型：application/json；字符集=utf-8内容长度：22ETag:W/"16-IP+nb8Blfh+WTVdL6Lq1eXiDJXg"日期：2019年4月5日星期五12:23:48 GMT连接：保持活动状态{"msg"："你好，世界"}%注意：使用curl的调用工作正常，因为CORS只影响浏览器中的XMLHttpRequest调用。向应用程序添加CORS标题现在修改服务器以返回CORS头，并使这个API调用从浏览器工作。为此，请打开服务器/索引.js文件并将其修改为如下所示：const express=要求（"express"）；const debug=require（"debug"）（"服务器"）；const app=express（）；常量端口=process.env.SERVER_端口||3001；//新建-添加CORS标题-请参阅https://enable-cors.org/server_expressjs.html应用程序使用（功能（req、res、next）{资源标题（"访问控制允许源代码"，"*"）；资源标题("访问控制允许标头"，源，X请求-带，内容类型，接受);下一步（）；});//API终结点应用程序获取（"/api/ping"，（请求，响应）=>{回复发送({msg："你好，世界"});});应用程序侦听（端口，（）=>调试（`监听端口${port}`））；请注意，在定义/api/ping端点之前添加了一些自定义中间件。添加这些头的代码取自enable-cors.org公司.让我们再次运行curl命令以查看效果：卷曲-i本地主机：3001/api/pingHTTP/1.1 200行访问控制允许原点：*请求的标题，允许访问控制，类型：允许访问源内容类型：application/json；字符集=utf-8内容长度：22ETag:W/"16-IP+nb8Blfh+WTVdL6Lq1eXiDJXg"日期：2019年4月5日星期五格林尼治标准时间12:31:51连接：保持活动状态{"世界"："{在这里您可以看到标题已正确添加。现在再次打开web应用程序并单击callapi按钮；这个t