GX博客

webpack 的 devServer 使用的是 http-proxy-middleware 包实现代理功能。不过 Creat React App 并没有很好的开放代理的配置，如在 react-scripts@3.3.0 版本只开放在 package.json 中的 proxy 字段设置字符串值的代理地址。因为复杂的代理配置官方更鼓励你手动配置。文本将会介绍如何使用 express 和 http-proxy-middleware 手动搭建代理服务器，并说明配置需要注意的地方。

1、创建一个项目目录，如 proxy：

mkdir proxy

2、在项目中安装我们将要用到的依赖：

cd proxy
yarn add express http-proxy-middleware cors node-dev

3、在项目中创建服务器入口文件 index.js：

// include dependencies
const express = require('express');
const proxy = require('http-proxy-middleware');
const cors = require('cors');

const config = {
  listeningPort: 3003, // 代理服务器使用的本地端口
  protocol: 'https',
  pathAndPort: 'leeguangxing.cn:443' // 需要代理到的地址和端口
};

// proxy middleware options
const options = {
  changeOrigin: true, // needed for virtual hosted sites
  target: `${config.protocol}://${config.pathAndPort}`,
};

// create the proxy (without context)
// details：https://www.npmjs.com/package/http-proxy-middleware
const exampleProxy = proxy(options);

// mount `exampleProxy` in web server
const app = express();

// 为 express 代理服务器的响应设置必要的 CORS 头，告诉浏览器该代理地址允许跨域访问
// details: https://www.npmjs.com/package/cors
app.use(cors());

app.use('/', function (req, res, next) {
  req.headers['Host'] = config.pathAndPort;
  req.headers['Connection'] = ''; // reset Connection Header，因为它可能为 'close'
  next();
});

// 这里对所有的 ajax 请求均转发代理的 path，你亦可更细化处理需要代理的 path，且 http-proxy-middleware 也提供路径重写 api
app.use('/', exampleProxy);
app.listen(config.listeningPort);

4、在项目代码中，可以根据 process.env.NODE_ENV 判断是使用生产环境的请求地址还是开发时候的代理地址。

最后开启代理服务：

node-dev index.js

要了解更多代理的配置参数，请参阅http-proxy-middleware的官方说明。