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

如果您是一名 Web 开发者，在尝试调用 API 时，您一定经常会看到屏幕上出现“ CORS ”错误。但是，为什么会发生这种情况呢？

出于安全原因，浏览器会限制从脚本发起的跨源 HTTP 请求。例如，如果您想https://api.github.com从托管在 的客户端前端应用程序访问托管在 的 API https://example.com，浏览器将不允许此请求完成。

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

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

那么，为什么会发生这种情况？

浏览器强制执行一项称为 的安全功能Same Origin Policy。根据Same Origin Policy，允许同源调用，但不允许不同源调用。

啊啊！！同源、异源是什么？我们来详细看看。浏览器把 定义为、和 的Origin组合。SchemeHostPort

• 方案名称 ——用于访问互联网资源的协议。方案名称后跟三个字符 :// 。最常用的协议是 http://、  https://、 ftp://和 mailto://。

• 主机名 — 资源所在主机的地址。主机名是分配给主机的域名。它通常是主机本地名称与其父域名的组合。例如， www.dev.to 由主机的计算机名称 www 和域名 组成dev.to

• 端口号 ——端口是应用程序运行的通信端点。有关端口号的更多信息，请查看此[链接]( https://en.wikipedia.org/wiki/Port_(computer_networking) )。

如果Scheme、Hostname 和 Port这三个组合相同，则浏览器将其识别为同源。这样，请求就完成了。

那么，这是否意味着不可能实现呢Cross-Origin HTTP request？

答案是否定的。

这就是CORS出现的地方，跨域资源共享机制。

CORS 的工作原理

CORS 允许服务器明确将某些来源列入白名单并帮助绕过该same-origin策略。

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

例如，如果我的 API 服务器托管在https://api.dipakkr.com/users配置了 CORS 的环境中，并且我从客户端应用程序发出请求https://github.com来获取一些数据，那么响应中就会包含这个 header。

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

CORS 预检请求

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

您可以在MDN上阅读有关 CORS 预检请求的更多信息，或者观看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: "*"这意味着任何域都可以访问此应用程序。

请注意，将其放入origin:"*"生产应用程序中是危险的，您永远不应该这样做。

要了解有关 CORS 的更多信息，请访问MDN。它是 Web 开发人员的好去处。

如果你读到最后，别忘了在评论区留言。反馈能帮助我进步。

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

订阅我的电子邮件通讯并获取最新信息！

如果你喜欢这篇文章，就点个❤️吧！干杯！