1.服务端只有一个端口且与客户端域不同时
客户端(client) 端口是http://localhost:3000/,如果服务端(server)就一个端口时,例如:http://localhost:5000/,只需要在package.json文件中添加配置 "proxy":'http://localhost:5000' 就行了
2.服务端有多个端口时且与客户端域不同时
客户端(client) 端口是http://localhost:3000/,服务端1(server1)端口:http://localhost:5000/,服务端2(server2)端口:http://localhost:5001/ 。需要在src文件夹中创建setupProxy.js文件,同时在文件夹中配置如下:
const proxy = require("http-proxy-middleware")
module.export =function(app){
app.use(
proxy('/api1',{//遇见/api1前缀的请求,就会触发该代理配置
target:"http://localhost:5000",//请求转发给谁
changeOrign:true,//控制服务器收到的请求头中Host的值
pathRewrite:{'^/api1':''}//重写请求路径
}),
proxy('/api2',{//遇见/api1前缀的请求,就会触发该代理配置
target:"http://localhost:5001",//请求转发给谁
changeOrign:true,//控制服务器收到的请求头中Host的值
pathRewrite:{'^/api2':''}//重写请求路径
}),
)
}
Client 使用axios向http://localhost:5000/ 发送请求时需要在axios.get函数中传入url参数http://localhost:3000(客户端地址)后面拼接配置项中所对应的参数在这里是/api1 ,同理,如果向服务器端口httpp://localhost:5001发送请求时需要在axios.get函数中传入url参数http://localhost:3000(客户端地址)后面拼接配置项中所对应的参数在这里是/api2。如下图所示: