前端跨域解决方案（7）：Node中间件
1 Node 中间件核心
1.1 为什么开发环境需要 Node 代理？
在前端开发中，我们常遇到：前端运行在localhost:3000，后端 API 在localhost:4000，跨域导致请求失败。而传统解决方案有以下局限性：
-
修改后端 CORS 配置：需后端开发配合，增加沟通成本；生产环境与开发环境配置不一致。
-
配置 Nginx 反向代理：修改配置后需重启服务，打断开发流程；配置文件管理复杂。
Node 中间件代理（如http-proxy-middleware）可在前端开发服务器中直接配置跨域代理，无需修改 Nginx，适合开发阶段使用。Node 中间件代理有以下优势：
-
开发效率提升：前端独立配置，无需等待后端调整
-
热更新支持：修改代理规则后无需重启服务器
-
环境隔离：开发环境专用配置，不影响生产部署
-
调试便利：可拦截、修改请求 / 响应内容
1.2 http-proxy-middleware
http-proxy-middleware 是一个用于 Node.js 的中间件，它可以在你的应用中创建一个反向代理。这在处理跨域请求、添加负载均衡、或者在开发环境中连接到不同的服务等场景中非常有用。
1.2.1 安装 http-proxy-middleware
可以使用 npm 或者 yarn 来安装这个包：
# 使用 npm 安装
npm install http-proxy-middleware --save-dev# 或使用 yarn
yarn add http-proxy-middleware --dev1.2.2 核心使用模式
你可以使用 createProxyMiddleware 函数来创建一个代理。这个函数接收一个配置对象，你可以在这个对象中指定代理的目标、路径重写规则等选项：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();// 代理所有以 /api 开头的请求
app.use('/api',createProxyMiddleware({target: 'http://localhost:4000', // 后端服务地址changeOrigin: true, // 修改请求头中的 hostpathRewrite: { '^/api': '' }, // 重写请求路径logLevel: 'debug', // 调试日志onProxyReq: (proxyReq, req, res) => { // 请求拦截器console.log(`转发请求: ${req.method} ${req.url}`);},onProxyRes: (proxyRes, req, res) => { // 响应拦截器console.log(`接收响应: ${proxyRes.statusCode}`);}})
);app.listen(3000, () => {console.log('开发服务器运行在 http://localhost:3000');
});1.2.3 配置选项详解
| 选项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
target | string | 后端服务的目标地址（必填） | - |
changeOrigin | boolean | 修改请求头中的 Host 为目标地址，解决部分服务器的跨域限制 | false |
pathRewrite | object/function | 重写请求路径，支持正则表达式替换 | {} |
secure | boolean | 是否验证 SSL 证书 | true |
logLevel | string | 日志级别：debug/info/warn/error | info |
onProxyReq | function(proxyReq, req, res) | 请求发送前的回调函数，可修改请求头或请求体 | - |
onProxyRes | function(proxyRes, req, res) | 响应返回后的回调函数，可修改响应头或响应体 | - |
onError | function(err, req, res) | 代理过程中出错时的回调函数 | - |
timeout | number | 请求超时时间（毫秒） | 0（无超时） |
headers | object | 添加自定义请求头 |
2 实战案例
以在 Express 中配置 http-proxy-middleware 为例。
2.1 安装依赖
npm install express http-proxy-middleware2.2 前端开发服务器（servera.js）
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();// 静态资源服务（前端页面）
app.use(express.static('public'));// 配置API代理
app.use('/api', createProxyMiddleware({target: 'http://localhost:4000', // 后端API地址changeOrigin: true, // 修改请求头host为target域名，解决跨域pathRewrite: {'^/api': '' // 去除URL中的/api前缀}
}));app.listen(3000, () => {console.log('前端开发服务器运行在 http://localhost:3000');
});2.3 后端 API 服务器（serverb.js）
const express = require('express');
const app = express();
const users = [{ id: 1, name: '张三' }];app.get('/users', (req, res) => {res.json(users);
});app.listen(4000, () => {console.log('后端API服务器运行在 http://localhost:4000');
});2.4 前端请求（index.html）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a</title>
</head><body><script>// 定义一个立即执行的异步函数(async function () {try {// 使用 fetch API 发送 GET 请求到指定的 URLconst response = await fetch('http://localhost:3000/api/users', {// 指定请求方法为 GETmethod: 'GET',// 指定请求头，表明期望的响应格式为 JSONheaders: {'Accept': 'application/json'}// 使用 then 方法将响应对象转换为 JSON 格式}).then(response => response.json())// 打印获取到的响应console.log('response ',response);} catch (error) {// 如果有任何错误，打印错误信息console.error('Error:', error);}// 立即执行上述定义的函数})();</script>
</body>
</html>Node 中间件代理是前端开发阶段的 “跨域神器”，无需修改后端代码，只需在前端服务器配置即可解决跨域问题，大幅提升开发效率。
下一章将介绍 window.name 方案 ，敬请期待！