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

这篇具有很好参考价值的文章主要介绍了react通过axios发送请求并演示配置多个反向代理地址解决跨域。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这里我们准备一个接口我这里用java写了一个
react通过axios发送请求并演示配置多个反向代理地址解决跨域
然后我们打开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>
        )
    }
}