create-react-app 脚手架创建的项目中配置接口代理

在react脚手架项目中使用axios发送请求，并配置代理

1、引入axios

npm install axios --save

2、项目中配置代理

（1）在src目录下增加setupProxy.js 文件并填入如下代码

const proxy = require('http-proxy-middleware');

module.exports = function(app){
    app.use(
        proxy('/api1',{//以api1开头的请求转发到 http://localhost:8080
            target:'http://localhost:8080',//代理地址
            changeOrigin:true,
            pathRewrite:{
                '^/api1':'',//实际请求的/api1 替换为空字符串
            }
        })
    )
}

上述配置的意思是 ，在发送以api1==开头的请求时，会代理到==http://localhost:8080 例如 ：发送请求 /api1/list== 实际上会发送到 ==http://localhost:8080/list

注意，加完这个文件(或者修改)之后必须重启服务

npm start

(2) 使用

import React, { Component } from 'react'
import axios from 'axios'//引入axios
export default class App extends Component {

  getList = ()=>{//发送请求，获取数据
    axios.get('/api1/list').then((res)=>{
      console.log(res);
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.getList}>获取数据</button>
      </div>
    )
  }
}

配置多个代理，以应对项目中有不同域名\端口的请求地址

还是在 src目录下的setupProxy.js文件

const proxy = require('http-proxy-middleware');

module.exports = function(app){
    app.use(
        proxy('/api1',{//以api1开头的请求转发到 http://localhost:8080
            target:'http://localhost:8080',//代理地址
            changeOrigin:true,
            pathRewrite:{
                '^/api1':'',//实际请求的/api1 替换为空字符串
            }
        }),
        proxy('/api2',{//以api2开头的请求转发到 http://localhost:8081
            target:'http://localhost:8081',//代理地址
            changeOrigin:true,
            pathRewrite:{
                '^/api2':'',//实际请求的/api2 替换为空字符串
            }
        })
    )
}

如上代码，配置了两个代理，一个api1==开头的代理到==http://localhost:8080==，一个==api2==开头的代理到==http://localhost:8081，更多代理同理，参考上述配置