简介
Node.js是一个开源的、跨平台的运行时,当在服务器端执行JavaScript代码时使用。其中一个流行的Node.js服务器框架是Express。在Node.js中实现CORS可以帮助你在浏览器上访问许多功能。
Express允许你配置和管理一个HTTP服务器来访问同一域的资源。
构成一个原点的三个部分是protocal、域和端口。


比方说,从另一个服务器访问图片、视频、iframe或脚本。这意味着网站是从不同的原点或域访问资源的。当用Express构建一个应用程序来提供这些资源时,对这种外部起源的请求可能会失败。这就是 CORS 的作用,它可以处理跨源请求。
先决条件
要跟上这篇博客,之前对Node.js和Express的了解是必不可少的。
这篇博客将帮助你了解 Express 的 CORS。那么,让我们开始学习吧。
什么是 CORS?
CORS 是Cross-Origin Resource Sharing 的缩写。它允许我们放松应用于API的安全性。这是通过绕过Access-Control-Allow-Origin 标头来实现的,标头指定了哪些origins 可以访问 API。
换句话说,CORS是一个浏览器的安全功能,它限制了与其他服务器的跨源HTTP请求,并指定哪些域可以访问你的资源。
CORS如何工作?
一个API是两个程序进行通信的一套程序。这意味着API资源被其他客户和服务器所消耗。
这里有两种情况。


客户端和服务器有相同的来源。在这个例子中,访问资源将是成功的。你试图访问你服务器上的资源,同一个服务器处理这个请求。


客户端和服务器彼此有不同的起源,即从不同的服务器访问资源。在这种情况下,试图向其他服务器上的资源提出请求将会失败。
这对浏览器来说是一个安全问题。CORS的作用是禁用这种机制,允许访问这些资源。它将添加一个响应头access-control-allow-origins ,并指定哪些来源是允许的。CORS 确保我们发送正确的标头。
用 Express 设置 CORS
让我们创建一个非常基本的 Express HTTP 服务器端点,提供一个 GET 响应。使用下面的命令,继续安装 CORS 和以下其他软件包。
npm i cors express nodemon
创建一个简单的Express GET请求
下面是一个简单的index.js express 服务器。
const express = require('express');
const app = express();
const ingredients = [
{
"id": "1",
"item": "Bread"
},
{
"id": "2",
"item": "Eggs"
},
{
"id": "3",
"item": "Milk"
},
{
"id": "4",
"item": "Butter"
}
];
app.get('/ingredients', (req, res) =>{
res.send(ingredients);
});
app.listen(6069);
用npm nodemon 运行服务器。导航到 [http://localhost:6069/ingredients](http://localhost:6069/ingredients)在你的浏览器上。你将得到这些成分的文本项目。
在这个例子中,跨源是允许的,因为你目前在同一个域名上,而且你是在同一个域名上执行这个请求。
现在让我们尝试使用fetch命令来获取原料。
我将执行同样的请求,但是从另一个网站执行。在这种情况下,我使用 [https://www.section.io](https://www.section.io/).
打开 [https://www.section.io](https://www.section.io/)在你的浏览器上,使用Fetch API从浏览器的控制台执行以下获取请求。
fetch("http://localhost:6069/ingredients").then(req => req.text()).then(console.log)
在执行上面的请求之前,请确保服务器已经启动并运行。
我们正在从另一个起源域获取成分信息。这个URL的原点不允许从这个服务器接收这个响应。因此,它将抛出下面的 CORS 错误。


为了解决这个错误,我们需要在服务器上添加 CORS 头,并给予 [https://www.section.io](https://www.section.io/)访问服务器的响应。
在你的index.js 文件中包括以下内容。
const cors = require('cors');
app.use(cors({
origin: 'https://www.section.io'
}));
如果你现在执行fetch命令,它应该工作正常。
然而,如果从另一个网页发出获取请求,它将失败并抛出以下错误。


这意味着你只能访问我们服务器的资源。你可以有一个数组,如下图所示,这些多源的资源。
const cors = require('cors');
app.use(cors({
origin: ['https://www.section.io', 'https://www.google.com/']
}));
尽管如此,该API可以是公开的,任何跨源的API和服务器都可以访问这些资源。下面的代码块将确保任何页面都可以访问配料资源。
app.use(cors({
origin: '*'
}));
Asterisk符号将创建CORS头,因此,任何原点都可以获得这个localhost服务器的响应。
由于这里没有定义具体的起源,app.use(cors()) 也会完成这个任务。
你也可以有动态原点。这些是白名单上的起源,可以访问你的API。这可以用来从数据库中提取资源。
你甚至可以指定你的服务器的哪些路由可以被访问。
app.get('/ingredients', cors(), (req, res, next) => {
res.send(ingredients);
});
总结
当你在服务器上部署一个应用程序时,你不应该接受来自每个域的请求。相反,你应该指定哪些来源可以向你的服务器发出请求。
这样,你就能够阻止那些试图克隆你的网站或从未经授权的服务器发出请求的用户。这是一项重要的安全措施。检查这个CORS NPM 注册表,了解更多关于在你的 Express 应用程序中使用 CORS 的地方。