React 使用 Proxy 代理(create-react-app)

React 使用 Proxy 代理(create-react-app)

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

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

create-react-app < 2.0

package.json 中配置

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

create-react-app > 2.0

package.json 中配置(不推荐)

1
"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

1
npm install http-proxy-middleware -D

然后文件配置

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

使用例子

01

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

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

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

02

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

游览器中请求为 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 时使用会出现如下问题

1
proxy is not a function

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

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

1
2
3
4
5
6
7
8
9
10
11
12
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
app.use(createProxyMiddleware('/api/v1', {
target : 'https://easymock.spiritling.pub',
changeOrigin : true,
ws: true,
pathRewrite : {
'^/api/v1' : ''
},
}));
};
-------文章到此结束  感谢您的阅读-------