一、配置代理的方式1
在package.json
中添加"proxy":"服务器地址"
,举例如下:
然后修改 axios
发送网络请求的地址的端口号,如下图:
二、配置代理的方式2
在src
里面新建一个文件:setupProxy.js
,自定义内容举例如下:
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
// 代理1
proxy('/api1',{
// 遇见/api1前缀的请求,就会触发该代理配置
target: 'http://localhost:5000', // 请求转发给谁
changeOrigin: true, // 控制服务器收到的请求头中Host字段的值,默认值是false
pathRewrite:{
'^/api1':''} // 重写请求路径【必需】
}),
// 代理2
proxy('/api2',{
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite:{
'^/api2':''}
}),
)
}
在对应 axios
发送网络请求的地址的端口号后面加上 /配置代理的名字
,比如:/api1
,见下图:
三、react
脚手架配置代理总结
These are bilibili尚硅谷React学习视频的 学习笔记~