React-22：React脚手架配置axios代理

React：React 脚手架配置 axios 代理

npm install axios 下载
import axios from 'axios'; 导入

方法一

1. 在项目的 package.json 文件中添加下面的一句话
   "proxy":"http://localhost:5000/"
2. 将请求修改为React脚手架对应的端口

getStudentData = () => {
    axios.get('http://localhost:3000/students').then(data => {
      console.log(data);
    })
  }

注意事项：并不是配置了代理，所有的请求都会通过代理，而是本地端口没有的请求才会询问代理端口。

方法二

配置多个代理

1. 在src文件中添加setupProxy.js文件
2. setupProxy.js中写的是common.js语法
3. 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); }
    )
  }