react的代理配置
第一种写在package.json中(不推荐)
代码中使用3000的端口访问, 例如如下:
// 创建并暴露App
export default class App extends Component{
getData = () => {
axios.get('http://localhost:3000/api/info').then(
response => {console.log('成功', response.data);},
error => {console.log('失败',error);}
)
}
render(){
return (
<div>
<Hello></Hello>
<Welcome></Welcome>
<button onClick={this.getData}>点我请求数据</button>
</div>
)
}
}
- 优点:配置简单,前端请求资源时可以不加任何前缀。
- 缺点:不能配置多个代理。
- 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
第二种 建立 setupProxy.js,注意必须是这个文件名
在src同级目录创建setupProxy.js;
注意:这个文件里面需要用commonjs写法,不能使用ES6用法,react会找到这个文件并把它添加到webpack配置中;
setupProxy.js文件中代码如下:
const proxy = require('http-proxy-middleware')
module.export = function(app){
app.use(
// 代理api 下面再把 /api 替换为空字符串 因为路径里面没有 /api
proxy('/api1', { // 遇见 /api1 前缀的请求 就会触发该代理配置
target: 'http://localhost:5000', // 请求转发给谁
changeOrigin: true, // 控制服务器接收到的请求头Host的值
// 重新请求路径 把 /api1 替换为空字符串 必须加
pathRewrite:{'^/api1' : ''}
}),
proxy('/api2', { // 遇见 /api2前缀的请求 就会触发该代理配置
target: 'http://localhost:5001',
changeOrigin: true,
// 把api 替换为空字符串
pathRewrite:{'^/api2' : ''}
}),
)
}
项目页面中调接口使用:
// 创建并暴露App
export default class App extends Component{
getDataOne = () => {
axios.get('http://localhost:3000/api1/info').then(
response => {console.log('成功', response.data);},
error => {console.log('失败',error);}
)
}
getDataTwo = () => {
axios.get('http://localhost:3000/api2/car').then(
response => {console.log('成功', response.data);},
error => {console.log('失败',error);}
)
}
render(){
return (
<div>
<Hello></Hello>
<Welcome></Welcome>
<button onClick={this.getDataOne}>点我请求数据1</button>
<button onClick={this.getDataTwo}>点我请求数据2</button>
</div>
)
}
}
- 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
- 缺点:配置繁琐,前端请求资源时必须加前缀。