CORS（跨源资源共享）如何工作？

如果您是网络开发人员，则在尝试调用API时，您肯定已经在屏幕上经常看到“ CORS ”错误。 但是，为什么会发生呢？

好吧，出于安全原因，浏览器限制了从脚本启动的跨域HTTP请求。 例如，如果你想访问你的API托管在` https://api.github.com从在托管客户端前端应用https://example.com 。 浏览器将不允许此请求完成。

您只需要在以下情况下考虑CORS：

1. 浏览器访问的API。
2. API托管在单独的域中。

那么，为什么会这样呢？

浏览器强制执行一项称为“相同来源策略”的安全功能。 根据“相同来源策略”，允许“相同来源”调用，并且不允许“不同来源”调用。

恩！ 同一起源，不同起源是什么？ 让我们更详细地了解这一点。 浏览器将“来源”定义为“方案”，“主机”和“端口”的组合。

1.方案名称 -它是用于访问Internet上的资源的协议。 方案名称后跟三个字符：//。最常用的协议是http:// ， https:// ， ftp://和mailto:// 。

2.主机名 -这是资源所在的主机的地址。 主机名是分配给主机的域名。 这通常是主机的本地名称和其父域名称的组合。 例如， www.hackernoon.com由主机的计算机名称www和域名“ hackernoon.com”组成。

3.端口号 -端口是您的应用程序运行所在的通信端点。 有关端口号的更多信息。 查看此链接 。

如果Scheme，Host name和Port的这三个组合相同，则浏览器会将其标识为Same Origin。 并且，请求完成。

因此，这是否意味着不可能进行跨域HTTP请求？

答案是不。

这就是CORS的来源，即跨域资源共享机制。

CORS如何运作

CORS允许服务器将特定来源明确列入白名单，并帮助绕过相同来源策略。

如果为您的服务器配置了CORS，它将在每个响应上返回带有“ Access-Control-Allow-Origin”的附加标头。

例如，如果我在https://api.dipakkr.com/上托管的API服务器已配置为CORS，并且我正在从客户端应用程序https://github.com发出请求以获取一些数据。 响应将具有此标头。

Access-Control-Allow-Origin: https: //github.com

CORS飞行前要求

预检请求首先通过OPTIONS方法将HTTP请求发送到另一个域上的资源，以确定实际请求是否可以安全发送。

您可以在MDN上阅读有关CORS Preflight请求的更多信息，或查看Akshay Saini的这段视频 。

如何启用CORS

用于在服务器应用程序上启用CORS。 您需要两件事。

1. 首先，您需要确定白名单的来源。
2. 其次，您必须将CORS中间件添加到服务器。

在这里，我向您解释在NodeJS服务器上配置CORS的步骤。

首先从此链接安装cors npm软件包。

npm install cors

然后转到您的服务器应用程序并添加以下代码。

// require the cors package
var cors = require ( 'cors' );

// enables cors
app.use(
  cors({
    origin : "*" ,
    methods : "GET,HEAD,PUT,PATCH,POST,DELETE" ,
    preflightContinue : false
  })
);

在这里您可以看到我使用的是Origin：“ *”，这意味着任何域都可以访问此应用程序。

要了解有关CORS的更多信息，请访问MDN 。

不要忘记在评论中提供您的反馈。 获得反馈可以帮助我改善。

我几乎每天都会写新东西。 您可以在Twitter上关注我| Instagram的

干杯!

From: https://hackernoon.com/how-cors-cross-origin-resource-sharing-works-292z32g0