办法一
在package.json中追加如下配置
"proxy":"http://localhost:5000"
阐明:
- 长处:配置简略,前端申请资源时能够不加任何前缀。
- 毛病:不能配置多个代理。
- 工作形式:上述形式配置代理,当申请了3000不存在的资源时,那么该申请会转发给5000 (优先匹配前端资源)
办法二
1、第一步:创立代理配置文件
在src下创立配置文件:src/setupProxy.js
2、编写setupProxy.js配置具体代理规定:
const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use( proxy('/api1', { //api1是须要转发的申请(所有带有/api1前缀的申请都会转发给5000) target: 'http://localhost:5000', //配置转发指标地址(能返回数据的服务器地址) changeOrigin: true, //管制服务器接管到的申请头中host字段的值 /* changeOrigin设置为true时,服务器收到的申请头中的host为:localhost:5000 changeOrigin设置为false时,服务器收到的申请头中的host为:localhost:3000 changeOrigin默认值为false,但咱们个别将changeOrigin值设为true */ pathRewrite: {'^/api1': ''} //去除申请前缀,保障交给后盾服务器的是失常申请地址(必须配置) }), proxy('/api2', { target: 'http://localhost:5001', changeOrigin: true, pathRewrite: {'^/api2': ''} }) )}
阐明:
- 长处:能够配置多个代理,能够灵便的管制申请是否走代理。
- 毛病:配置繁琐,前端申请资源时必须加前缀。