react配置代理的3中方法
1.使用create-react-app的代理配置
可以在项目根目录下的package.json文件中添加proxy字段来配置代理：
{..."proxy": "http://localhost:5000"
}
//注意：比如当前端口是3000，先在当前端口3000中找对应路径内容，找不到就去5000中2.使用http-proxy-middleware库
create-react-app中内置http-proxy-middleware，只需要在src目录下新建setupProxy.js
//setupProxy.js
const proxy = require('http-proxy-middleware') //这里用require()引入，是因为这里用commonjs规范
module.exports = function (app) {app.use(proxy('/api', {target: 'http://localhost:5000',changeOrigin: true,pathRewrite: {'^/api': ''}}))
}3.craco 扩展webpack配置
安装
npm i -D @craco/craco package.json里面做如下改动：
"scripts": {
- "start": "react-scripts start"
+ "start": "craco start"
- "build": "react-scripts build"
+ "build": "craco build"
- "test": "react-scripts test"
+ "test": "craco test"
}根目录建文件craco.config.js
module.exports={//...// ...devServer: {proxy: {'/api': {target: 'http://localhost:5000',changeOrigin: true}}}
}