NodeJS配置CORS实现过程详解

NodeJS配置CORS实现过程详解

什么是CORS？

CORS（跨站点HTTP请求）是一种机制，它使用额外的HTTP头来告诉浏览器能够访问哪些来源的网站。对于跨源AJAX请求的用户代理（例如，Web浏览器），原始源和目标源是不同的。

为什么需要启用CORS？

当我们在服务器A上的应用程序中使用AJAX从服务器B请求数据时，我们需要启用跨域资源共享（CORS）。否则，我们将收到以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

如果A服务器未配置CORS而向B服务器发送请求，则B服务器不会响应请求。因此，在使用AJAX请求时，为了使请求成功，我们需要在服务器上启用CORS。

CORS实现过程

为了启用CORS，我们需要在服务器上进行一些配置。我们可以使用NodeJS在服务器端启用CORS。

下面是启用CORS的步骤：

1.在服务器端安装CORS包

npm install cors

2.在服务器端使用cors模块

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

在上面的代码中，我们使用const关键字引入express和cors模块。我们创建一个名为app的express实例，然后使用cors()中间件启用CORS。

这就是所有的步骤，启用了CORS之后，我们就可以从其他服务器请求数据了。

示例1

在示例中，我们将展示如何从客户端使用AJAX向服务器发送HTTP请求，从服务器中获取数据，并在客户端中显示数据。在此过程中，我们启用了CORS。

客户端代码（JavaScript代码）：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/data', true);
​
xhr.onload = function() {
    const data = JSON.parse(this.responseText);
    //在此处操作数据
};
​
xhr.send();

服务器端代码：

const express = require('express');
const cors = require('cors');
const app = express();
​
app.use(cors());
​
app.get('/data', function(req, res) {
    const data = {'foo': 'bar'};
    res.send(data);
});
​
app.listen(3000, function() {
    console.log('Server started at port 3000');
});

在上面的代码中，我们定义了一个名为/data的路由。当客户端发送GET请求到该路由时，服务器将返回JSON格式的数据。我们使用cors()中间件启用CORS。

示例2

在第二个示例中，我们将展示如何通过使用axios库在NodeJS中使用HTTP请求，从另一个服务器获取数据。

const axios = require('axios');
​
axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => console.log(response.data))
    .catch(error => console.log(error));

在上面的代码中，我们使用axios库从https://jsonplaceholder.typicode.com/todos/1请求数据。如果该请求成功，我们将在控制台中输出服务器返回的数据。

结论

在NodeJS中启用CORS非常简单。使用cors包和app.use(cors())中间件即可。之后，我们可以从任何其他服务器请求数据。