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里面做如下改动: