React:React 脚手架配置 axios 代理
npm install axios
下载
import axios from 'axios';
导入
方法一
- 在项目的 package.json 文件中添加下面的一句话
"proxy":"http://localhost:5000/"
- 将请求修改为React脚手架对应的端口
getStudentData = () => {
axios.get('http://localhost:3000/students').then(data => {
console.log(data);
})
}
注意事项:并不是配置了代理,所有的请求都会通过代理,而是本地端口没有的请求才会询问代理端口。
方法二
配置多个代理
- 在src文件中添加setupProxy.js文件
- setupProxy.js中写的是common.js语法
- setupProxy.js中的文件内容
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
proxy('/api1',{ //遇见/api1前缀的请求,就会触发该代理配置
target: 'http://localhost:5000', //请求转发给谁
changeOrigin: true, //控制服务器收到的请求头中Host的值
pathRewrite: {'^/api1':''} //重写请求路径(必须)
}),
proxy('/api2',{
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {'^/api2':''}
})
)
}
4.修改axios请求路径
// An highlighted block
getStudentData = () => {
axios.get('http://localhost:3000/api1/students').then(
response => { console.log('成功了', response.data); },
error => { console.log('失败了', error); }
)
}
getCarData = () => {
axios.get('http://localhost:3000/api2/cars').then(
response => { console.log('成功了', response.data); },
error => { console.log('失败了', error); }
)
}