React 使用 Proxy 代理create-react-app

在create-react-app 中配置proxy代理

proxy，默认为NULL，类型为URL，一个为了发送http请求的代理 在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要proxy代理来处理

create-react-app < 2.0

package.json 中配置

1.  
   "proxy":{
2.  
   "/api/**":{
3.  
   "target":"https://easymock.spiritling.pub/",
4.  
   "changeOrigin": true
5.  
   }
6.  
   }

create-react-app > 2.0

package.json 中配置（不推荐）

"proxy": "https://easymock.spiritling.pub/",

配置文件 /src/setupProxy.js （推荐）

将 create-react-app 解包后，可以在 config 文件夹下找到配置

在 config/path.js 中存在 proxySetup: resolveApp('src/setupProxy.js'),

而 proxySetup 是只在 webpackDevServer.config.js 文件中使用，也就是说只在开发时使用

所以，可以在 /src/setupProxy.js 中配置

首先安装 http-proxy-middleware

npm install http-proxy-middleware -D

然后文件配置

1.  
   const proxy = require('http-proxy-middleware');
2.  
   module.exports = function (app) {
3.  
   app.use(
4.  
   '/api/v1/',
5.  
   proxy({
6.  
   target : 'https://easymock.spiritling.pub/',
7.  
   changeOrigin : true, // 设置跨域请求
8.  
   PathRewrite : {
9.  
   '^/api/v1' : '' // 将/api/v1 变为 ''
10.  
    }
11.  
    })
12.  
    );
13.  
    };

使用例子

01

1.  
   const proxy = require('http-proxy-middleware');
2.  
   module.exports = function (app) {
3.  
   app.use(
4.  
   '/api/v1/',
5.  
   proxy({
6.  
   target : 'https://easymock.spiritling.pub/',
7.  
   changeOrigin : true
8.  
   })
9.  
   );
10.  
    };

游览器中请求为 https://example.com/api/v1/login

则经过代理后可以转为 https://easymock.spiritling.pub/api/v1/login

02

1.  
   const proxy = require('http-proxy-middleware');
2.  
   module.exports = function (app) {
3.  
   app.use(
4.  
   '/api/v1/',
5.  
   proxy({
6.  
   target : 'https://easymock.spiritling.pub/',
7.  
   changeOrigin : true,
8.  
   PathRewrite : {
9.  
   '^/api/v1' : ''
10.  
    }
11.  
    })
12.  
    );
13.  
    };

游览器中请求为 https://example.com/api/v1/login

则经过代理后可以转为 https://easymock.spiritling.pub/login

create-react-app官方-Proxying API Requests in Development

http-proxy-middleware 新版本 ≧ 1.0.0

在新版本大于等于 1.0.0 时使用会出现如下问题

proxy is not a function

也就是说 http-proxy-middleware 或者 setupProxy 会出现报错 proxy is not a function

所以需要使用新版本的写法才可以

1.  
   const { createProxyMiddleware } = require('http-proxy-middleware');
2.  
    
3.  
   module.exports = function (app) {
4.  
   app.use(createProxyMiddleware('/api/v1', {
5.  
   target : 'https://easymock.spiritling.pub',
6.  
   changeOrigin : true,
7.  
   ws: true,
8.  
   pathRewrite : {
9.  
   '^/api/v1' : ''
10.  
    },
11.  
    }));
12.  
    };

这篇好文章是转载于：学新通技术网