React中配置代理实现跨域

一、简单配置

在package.json中追加如下配置：

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

说明：

　　1.优点，配置简单，前端请求时不加任何前缀

　　2.缺点，不能配置多个代理

　　3.上述方式配置代理，当请求了3000不存在的资源时才会转发给5000

二、复杂配置

第一步：在src文件夹下创建setupProxy.js 名字必须统一

第二步：

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

module.exports = function(app){
    app.use(
        proxy('/api1',{//遇见/api1这个前缀的请求就会触发该代理配置
            target:'http://localhost:3100',//请求转发给谁
            changeOrigin:true,//控制服务器收到的请求头中Host字段的值，标识着从哪发出的,为true是代理的端口，false是本身的端口
            pathRewrite:{'^/api1':''}//重写请求路径
        }),
        proxy('/api2',{
            target:'http://localhost:3200',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
    )
}

优点：可以配置多个代理

缺点：请求地址必须加前缀

React中配置代理实现跨域

相关推荐