react通过axios发送请求并演示配置多个反向代理地址解决跨域

这里 我们准备一个接口 我这里用java写了一个

然后 我们打开react项目 安装axios

npm i axios@0.21.0

然后在src下创建一个setupProxy.js
编写代码如下

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

module.exports = function(app) {
    
    
  app.use(
 		// 可以配置多个代理
    proxy.createProxyMiddleware('/api', {
    
    
      target: 'http://localhost:8080',
      changeOrigin: true,
    }),
    proxy.createProxyMiddleware('/user', {
    
    
      target: 'http://localhost:8081',
      changeOrigin: true,
    })
  )
}

可以看到 这里我们配了两个方向代理
如果请求的路中 包含api 就会代理成 http://localhost:8080/请求路径
如果包含user则会成为 http://localhost:808/请求路径

这样代理就可以解决跨域问题

然后 我们在组件中编写代码如下

import React from "react";
import axios from "axios";

export default class AppRouter extends React.Component{
    
    
    constructor(props){
    
    
      super(props);
      this.state = {
    
    
      }
    }
    componentWillMount = ()=>{
    
    
        axios({
    
    
        url:"/user/",
        headers:{
    
    
        }
        }).then(res=>{
    
    
            console.log(res.data);
        
        })
    }

    render(){
    
    
        return (
            <div>
                
            </div>
        )
    }
}

这里 我们在componentWillMount生命周期中通过引入的axios发送了一个get请求
axis上不声明请求方式就是get
路径是/user/

因为 包含了 /user 会匹配上第二个代理 成为 http://localhost:8081/user/

我们启动项目


可以 看到 代理的地址顺利的帮我们拿回了数据