create-react-app 构建的项目使用代理 proxy

1.首先进入项目运行 npm run eject 展开详细代码(只可以使用一次,展开后不可恢复)

2.create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置, 配置成如下:

1
2
3
4
5
6
"proxy":{
"/api/**":{
"target":"https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/", //需要代理的地址
   "changeOrigin": true
}
}

3.create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型, 配置成如下:

1
"proxy": "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",

4.更好的配置,建立 src/setupProxy.js 文件,npm 安装 install http-proxy-middleware , 配置成如下:(可配置多个代理)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
proxy("/base/", {
target: "http://45.32.15.21:8090/",
changeOrigin: true
})
);
app.use(
proxy("/api/", {
target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
changeOrigin: true
})
);
};
#

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×