React脚手架配置代理

React脚手架配置代理

方法一

在package.json中添加如下配置

"proxy":"http://localhost:5000"

1. 优点

   配置简单，前端请求资源时可以不加任何前缀

2. 缺点

   不能同时配置多个代理

当发送请求时，先在自己的服务器中寻找是否存在请求的资源，如果不存在再走代理的通道。

方法二

在src目录下创建配置文件setupProxy.js

写入配置规则

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

module.exports = function(app){
    app.use(
        //一切发给api1的都会走代理
        proxy('/api1',{
            //代理发香服务器地址
            target:'http://localhost:5000',
            //控制服务器收到的请求头中Host的值，true为服务器显示是同源发的请求
            changeOrigin:true,
            //把api1替换成空字符串
            pathRewrite:{'^/api1':''}
        }),
        //一切发给api2的都会走代理
        proxy('/api2',{
            //代理发香服务器地址
            target:'http://localhost:5001',
            //控制服务器收到的请求头中Host的值，true为服务器显示是同源发的请求
            changeOrigin:true,
            //把api1替换成空字符串
            pathRewrite:{'^/api2':''}
        })
    )
}

使用方法

axios.get('http://localhost:3000/api1/student').then(
    response=>{},
    error=>{console.log('失败了',error)})

1. 优点

   可以配置多个代理，可以灵活配置多个代理

2. 缺点

   配置繁琐，前端请求资源时需加前缀