什么是CORS-ORIGIN？

一种称为Cross-Origin Resource Sharing（CORS）的技术或协议使一个域上的设备访问位于其他域中的资源。

浏览器通常会阻止来自其自身领域以外的安全问题的请求。在某些情况下，您可能想解决此问题并从不同的域中访问资源，并且CORS使此可行。

什么是相同的原始政策？

另一个称为相同原始策略（SOP）的概念允许在相关域上进行资源访问。我们将在本指南中讨论SOP及其对网站安全的贡献。我们还将通过CORS如何提高SOP的速度和多功能性。

这意味着，如果两个域想要共享资源，则它们的起源必须相同。两个网站的域，端口号和协议类型必须匹配它们的起源相同。如果发现三种质量中的任何一种不同，来源被认为具有单独的起源。

。

尽管是一个限制性系统，但SOP还是很安全，可以防止使用跨域资源对网站的潜在攻击。

SOP为网站提供保护，但也可以用作与外部网站通信的聚会场所。

什么是交叉原始资源共享（CORS）？

CORS的引入可以快速而简单地访问子域和可靠的第三方。如前所述，CORS提供了跨域起源之间的受控资源共享。

根据CORS要求，浏览器和交叉孔网站，您正在尝试访问Exchange HTTP标头，这些HTTP标头指定了可信赖的Web起源和访问控制的相关特征。

CORS提供了对跨越域的网站且因此安全的限制访问。 COR通常用于解决SOP带来的限制。但是，如果不正确地实施，CORS可能会构成严重的安全威胁。 CORS配置问题可能会导致困难和错误。

让我们进一步了解有关CORS错误以及如何预防它们的更多信息。

如何找到错误？

您需要确定哪个请求是有问题的，以及为什么要理解CORS设置的潜在问题。您可以按照以下步骤进行操作：

• 打开浏览器开发人员工具，如果您在提出API请求时看到这样的内容，请单击Console。您有交叉起源问题。

如何在应用程序中启用CORS

您可以使用几个步骤来防止此CORS错误破坏您的应用程序。

修复01：

通过在应用程序的Web根目录中（公共）中包含以下内容，您可以允许从应用程序发送CORS标题：

• 您可以使用以下来源设置特定的URL：access-control-Allow-Origin: http://localhost:3000，也可以通过使用此Access-Control-Allow-Origin: *启用所有URL

修复02：

有很多Google扩展名可防止CORS错误发生。通过安装其中一个浏览器扩展程序可以轻松解决您的问题。

• 

• 

但是请记住，这不是理想的解决方案，当您部署应用程序时，这是不实际的，因为我们可以要求我们的客户安装浏览器扩展程序以运行我们的应用程序ð

修复03：

通过构建中间件/代理，我们可以防止CORS错误。这是上述所有解决方案中最好的解决方案。以下代码段是一个示例，如何使用简单的node中间件来克服CORS错误。

它如何运作？由于代理人对Express Mifdreware的使用，服务器的每个响应都会收到Access-Control-Allow-Origin: *标头。代理要求响应另一台服务器自己的/random获取端点。尽管域是不同的事实，但该请求并未被same-origin policy所阻止。毕竟，这是server-to-server的请求。然后由代理创建所得数据和Access-Control-Allow-Origin: *标头，然后发送回原始请求者（浏览器应用程序）。

结论

前端开发人员可能会因CORS错误而遭受巨大损失。但是，一旦您理解了造成错误的基本相同原产政策，以及它如何防御恶意的跨站点请求伪造攻击，它就会变得更加容忍。

。

最后，由于所有这些修复程序，您永远不必担心浏览器控制台日志中遇到红色CORS错误。相反，您将拔出插件或代理并在其面部声明：