create-react-app 开发时代理转发设置

作者: Cassandra121 | 来源:发表于2018-12-28 12:22 被阅读0次

1.x.x 版本

添加 proxy 字段到 package.json 即可。

  "proxy": {
    "/api": {
      "target": "http://127.0.0.1:4001",
      "pathRewrite": {
        "^/api": "/"
      }
    },
    "/auth": {
      "target": "http://127.0.0.1:4002",
      "pathRewrite": {
        "^/auth": "/"
      }
    }
  },

2.x.x 版本

创建一个转发中间件，调试运行时自动查找并注入。

/* 1.首先安装依赖 */
$ npm install http-proxy-middleware --save

/* 2.然后创建 src/setupProxy.js 并写入一下转发规则 */
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(proxy('/api', {
        target: 'http://127.0.0.1:4001/',
        pathRewrite: {
            "^/api": "/"
        }
    }));
    app.use(proxy('/auth', {
        target: 'http://127.0.0.1:4002/',
        pathRewrite: {
            "^/auth": "/"
        }
    }));
};