什么是 CORS？它是如何工作的 ？

如果你正在阅读本文，我想应该是你在进行一些 API 调用时在浏览器控制台中遇到与 CORS 相关的奇怪错误。今天我们将了解这些错误是什么以及如何解决它。

我们的浏览器有一些安全策略，以便数据传输是安全的，并且在数据到达最终用户之前不会受到破坏数据的攻击。现代浏览器的策略之一被称为同源策略，这仅仅意味着网页可以访问同源的资源。

什么是同源

简单来说同源即三个相同：

• 协议相同

• 域名相同

• 端口相同

  如下图所示

现在假设从源 https://localhost:3000 请求 https://exampleapi.com/ 的服务器上的资源，此时将收到 CORS 错误，因为浏览器具有同源策略，不能从不同来源的服务器请求（数据、图像等）。

如何解决这个错误

可以通过在访问资源的服务器上进行一些配置更改来修复此错误。对于 Web 应用程序，当从客户端请求时，由于来源不匹配，将产生CORS 错误。如果要避免CORS 错误，服务器需要在响应中指定允许的来源，以便浏览器会对此进行调查并且不会阻止它们，从而解决 CORS 错误。

无论后端使用什么语言和框架，我们只需要在服务器配置中添加允许的来源，以便服务器将发送特定参数 Access-Control-Allow-Origin : 在响应正文中。

在这里，我们可以看到Access-Control-Allow-Origin: *使用此参数浏览器将了解允许访问此资源的来源， * 表示任何来源都可以访问此资源。我们还可以拥有一组允许的来源来访问任何资源。

下面是在 Node/Express 中应用 CORS 的代码片段。你需要使用命令安装cors包： npm install cors

然后，你可以简单地执行 app.use() 并在其中传递 cors 函数。

这个 cors 函数将一个对象作为参数，你需要在其中添加 key : value 对 origin : * ，你还可以指定一个允许的原点数组作为值。不建议使用 *，因为它可以访问任何来源以获取资源。始终提供一组允许的来源。

预检请求

预检请求是一个CORS请求，它使用特定的方法和报头检查服务器是否理解CORS协议，以及是否感知CORS协议。

所以，基本上有两种类型的请求

1. 简单请求
2. 预检请求

使用 GET 、 HEAD 、 POST 等方法的请求属于简单请求，因为这些请求不会对服务器端的数据产生副作用。GET 请求最多会从服务器获取数据，而 POST 请求将在服务器端创建新数据，但它们都不能改变服务器上已经存在的数据。

使用 DELETE 或 PUT 等方法的请求属于预检请求，因为使用这些方法任何人都可以修改或删除服务器端存在的数据，从而产生副作用。浏览器在发送实际请求之前，会发送带有 ccess-control-allow-methods 和 access-control-allow-headers 的预检请求，用于检查服务器是否允许这些方法。这些操作可以做吗？如果服务器发送 200 状态说明预检请求已验证，则浏览器发送实际请求。