Node中使用http-proxy-middleware实现代理跨域的方法步骤

下面是“Node中使用http-proxy-middleware实现代理跨域的方法步骤”的完整攻略。

什么是http-proxy-middleware

http-proxy-middleware是一款Node.js中间件，允许我们快速、简单地将HTTP请求代理到另一个服务器。http-proxy-middleware兼容Express和Connect等常见Node.js web框架。

步骤

1. 安装http-proxy-middleware

我们可以通过npm全局安装或项目依赖安装来安装http-proxy-middleware。

# 全局安装
npm install -g http-proxy-middleware

# 项目依赖安装
npm install --save http-proxy-middleware

1. 确定API接口地址

假设我们现在需要调用的API接口地址为http://api.example.com，并且需要将所有以/api开头的请求代理到这个地址。

1. 配置代理

创建一个中间件文件proxy.js，添加以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use('/api', createProxyMiddleware({
    target: 'http://api.example.com',
    changeOrigin: true,
  }));
};

解释一下这段代码：

• createProxyMiddleware是http-proxy-middleware模块提供的函数，用于创建代理中间件
• app.use('/api', middleware)表示只有请求路径以/api开头的请求才会进入这个中间件，然后通过这个中间件将请求代理到我们需要的地址上
• target是代理地址，这里我们把target设为了http://api.example.com

• changeOrigin表示目标服务器是否允许改变源，因为我们这里需要在请求头中添加Origin字段，changeOrigin需要设为true。

• 使用代理中间件

接下来，我们需要使用这个代理中间件。在前端的package.json文件中添加以下代码：

"proxy": "http://localhost:3001",

这里的http://localhost:3001表示我们的应用服务器的地址和端口。

然后把我们刚才写的代理中间件引入到应用程序的入口文件中，例如app.js或server.js：

const express = require('express');
const app = express();
const proxyMiddleware = require('./proxy');

proxyMiddleware(app);

app.listen(3001, () => {
  console.log('Server is running on http://localhost:3001');
});

1. 测试代理

完成上述操作后，我们可以测试一下我们的代理是否生效。例如，我们可以创建一个/api/users的请求，来获取用户列表。

const fetch = require('node-fetch');

fetch('/api/users').then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

示例

下面给出两个示例。

示例1：代理至本地Mock数据

当我们正在开发时，我们经常会使用本地的Mock数据来进行测试或演示。在这种情况下，我们可以使用http-proxy-middleware将请求代理到本地的Mock数据上。

首先，我们需要确保本地的Mock数据已经正确地启动了，Mock数据地址为http://localhost:3002。然后，我们需要在proxy.js中做出如下修改：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:3002',
    changeOrigin: true,
    pathRewrite: {
      '/api': ''
    }
  }));
};

这里需要注意的是，当我们访问http://localhost:3001/api时，http-proxy-middleware会将/api去掉并将剩余的路径/代理到http://localhost:3002/。

示例2：代理至远程服务器

当我们需要将我们的后台API请求发往生产环境或其他环境时，我们可以使用http-proxy-middleware将请求代理到远程的服务器上。

现在假设我们有一个生产环境API地址为https://api.example.com。然后我们需要在proxy.js中做出如下修改：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use('/api', createProxyMiddleware({
    target: 'https://api.example.com',
    changeOrigin: true,
    secure: false,
    headers: {
      'Origin': 'https://example.com',
    },
  }));
};

这里需要注意的是，由于我们要访问的是HTTPS地址，我们需要在创建代理中间件时将secure设置为false，以允许HTTPS连接。

总结

通过使用http-proxy-middleware，我们可以快速、简单地将HTTP请求代理到另一个服务器上，从而实现跨域。步骤包括安装依赖、配置代理、使用代理中间件和测试代理，其中使用代理中间件是关键。在真实场景中，我们可以将代理地址设置为本地的Mock数据或远程的生产API，从而实现我们的Cross-Origin资源共享（CORS）需求。