react 配置代理有两种不同的方式
在 package.json 中配置全局代理,但是只能有一个代理
在src中新建一个 setupProxy.js 文件,脚手架会自动识别并代理,可以配置多个代理。
一、在package.json中配置
"proxy": "需要代理的域名",
二、在 setupProxy.js(src目录下) 中配置
//api1是需页转发的请(所有带有/api1前温的请求部会转发给5000) target :'http://localhost:5000',
//配置转发目标地址(返回款据的职务器地址)
//change0rigin: true 。控制服务器接收到的谓求头中 host 字段的值
//changeorigin 设置为 true 时,服务器收到的请求头中的 host 为: localhost :5000
//changeorigin 设置为 false 时,服务器收到的请求头中的 host 为: localhost :3000
//changeorigin 默认他为 false ,但我们一般将 changeorigin 值设为 true
const {
createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/api1', {
// 使用 /api 前缀代理配置
target: '需要代理的域名',// 跨域地址
changeOrigin: true,//控制服务器收到的请求头中host的值
pathRewrite: {
'^/api1': ''
}
}),
createProxyMiddleware('/ap2', {
// 使用 /api 前缀代理配置
target: '需要代理的域名',// 跨域地址
changeOrigin: true,//控制服务器收到的请求头中host的值
pathRewrite: {
'^/api2': ''
}
}),
)
}