在前端开发过程中，经常会遇到跨域问题。为了解决这个问题，可以使用 cors-middleware 这个 npm 包。本文章将为你介绍如何使用 cors-middleware，使得前端与后台交互更加便捷。
cors-middleware 是什么？
cors-middleware 是一个 node.js 中间件，可以帮助我们实现跨域请求。它基于 cors 模块开发，是一个简单易用的跨域解决方案。
安装 cors-middleware
要使用 cors-middleware，需要先安装它。可以通过 npm install 命令进行安装。
npm install cors-middleware
使用 cors-middleware
使用 cors-middleware 只需要两步，第一步是引入中间件，第二步是将其加入到 node.js 应用中。
引入中间件
在 node.js 应用中，使用 require() 方法引入 cors-middleware。引入方法如下：
const corsMiddleware = require('cors-middleware');加入应用
将引入的中间件加入应用，使用 app.use() 方法加入中间件。如下：
app.use(corsMiddleware({
origins: ['http://localhost:3000'],
allowHeaders: ['X-Requested-With'],
exposeHeaders: ['X-Total-Count'],
credentials: true,
}));注：origins 是用于设置可接受的请求来源的数组参数。 在 credentials 为 true 的情况下，cookies 也可以跨域请求。更多参数见 cors 模块。
示例代码
在以下示例中，我们将模拟一个前端向后台发送 GET 请求的过程。
后台代码
首先，我们需要编写后台代码，创建 node.js 应用并加入 cors-middleware。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- -------------- - --------------------------- ----- --- - ---------- ------------------------ -------- -------------------------- ------------ ----- ---- ---------------- ----- ---- -- - ----- ---- - - -------- ------- ------- -- --------------- --- ---------------- -- -- - ------------------- ------- -- ------------------------ ---
在这个简单的例子中，我们创建了一个 Express 应用，并使用 cors-middleware 处理跨域请求。我们实现了一个 GET 方法，向前端发送一个包含 'Hello, world!' 的数据对象。
前端代码
接下来，我们编写前端代码，通过 AJAX 向后台发送 GET 请求，并接收数据。
-- -------------------- ---- -------
----- ------- - --- -----------------
------------------- ------------------------------
----------------------- - -----
---------------
-------------------------- - -- -- -
-- ------------------- --- - -- -------------- --- ---- -
----- ---- - ---------------------------------
--------------------------
-
--在这个简单的例子中，我们使用了原生的 AJAX 发送 GET 请求，并设置了 withCredentials 为 true，以开启跨域请求。成功获取数据后，使用 JSON.parse() 解析数据对象，并输出其中的 message 属性值。
总结
cors-middleware 是一个十分方便实用的跨域解决方案，可以解决前端与后台之间的跨域问题，使得开发变得更加快捷，出现问题时也更加容易排查。学会使用 cors-middleware，可以更加高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728381e8991b448e8b6a