Node.js基于cors解决接口跨域的问题(推荐)

Node.js 是一个基于 JavaScript 运行的平台，可用于构建高性能、可伸缩的 Web 应用程序。在使用 Node.js 构建 Web 应用程序时，经常需要解决跨域请求的问题。本文将介绍如何在 Node.js 环境下使用 CORS 库来解决接口跨域的问题。

什么是跨域请求？

跨域请求是指在浏览器中通过 AJAX(Asynchronous JavaScript and XML) 或 Fetch API 发起的请求，该请求的目标域名与当前页面所在的域名不同。举个例子，当我们在一个域名为 example.com 的页面中使用 AJAX 或 Fetch API 请求另一个域名为 api.example.com 的 API 时，就产生了跨域请求。

在默认情况下，浏览器会禁止这种跨域请求。这是因为跨域请求可能会带来安全问题，攻击者可以利用跨域请求窃取数据或在目标域名上执行恶意代码。因此，在进行跨域请求时，必须采取措施确保请求的安全性。

什么是 CORS？

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种机制，用于跨域请求中的客户端和服务器之间共享资源。CORS 允许在浏览器端使用标准的 Web API，该 API 可用于访问其他域名的资源，但同时可确保安全性。与非标准的 JSONP （仅用于 GET 请求）相比，CORS 能处理所有类型的 HTTP 请求，并且更为安全和可靠。

Node.js 中使用 CORS 库解决跨域请求问题

在 Node.js 中，我们可以使用 Cors 库来解决跨域请求的问题。CORS 库提供了跨域资源共享的处理方式，用于 Node.js 中处理跨域请求。

安装 CORS 库

在终端中使用 npm 命令安装 CORS 库：

npm install cors

使用 CORS 库解决跨域问题

在使用 CORS 库处理跨域请求时，我们需要在 Node.js 服务器端的代码中添加一段 CORS 相关的代码。该代码片段可用于所有的路由请求，或者只处理特定的路由请求。

下面是一段可用于所有路由请求的 CORS 代码：

const express = require('express');
const cors = require('cors');

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

// 处理路由请求

在上面的代码中，我们通过 require 导入了 express 和 cors 两个模块，并在 app 实例中使用 cors() 中间件来启用跨域请求功能。然后，我们可以按照惯例处理路由请求。

当我们只需要启用特定路由的 CORS 支持时，我们可以在路由处理函数中添加如下代码：

const express = require('express');
const cors = require('cors');

const app = express();

app.get('/example', cors(), (req, res) => {
  // 处理 GET /example 请求
});

在上面的代码中，我们在处理 GET /example 请求的中间件中使用了 cors() 中间件来启用跨域请求功能。

注意：在使用 CORS 库时，请确保将其添加到适当的路由处理程序上，并且避免在路由处理程序之前启用 CORS。这有助于确保跨域请求由正确的路由处理器处理，并减小安全风险。

示例说明

示例一：使用 CORS 库与 Axios 前端库

下面是一段前端 JavaScript 代码，该代码使用了 Axios 库来发起跨域请求：

axios.get('http://domainB.com',{withCredentials: true})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

在服务器端，我们可以使用 CORS 库解决跨域请求问题：

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({
  origin: 'http://domainA.com',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true
}));

// 处理路由请求

在上面的代码中，我们使用 app.use() 方法来启用 CORS 中间件。我们将 origin 设置为 http://domainA.com，以此允许来自该域名的请求；将 methods 设置为支持的 HTTP 方法；并开启 credentials，以支持发送 Cookie 信息。

示例二：使用 CORS 库与 jQuery 前端库

下面是一段前端 JavaScript 代码，该代码使用了 jQuery 库来发起跨域请求：

$.ajax({
  url: 'http://domainB.com',
  type: 'GET',
  xhrFields: {
    withCredentials: true
  },
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});