react脚手架跨域配置代理总结

FeHelper 谷歌浏览器插件，功能是请求服务端接口，返回值可以格式化
跨域配置代理：
**

方法一：

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

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

说明：
1.优点： 配置简单，前端请求资源时可以不加任何前缀。
2.缺点： 不能配置多个代理。
3.工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求就会转发给5000（优先匹配前端资源）
**

方法二：

**
1.第一步： 创建代理配置文件

在src下创建配置文件： src/setupProxy.js

2.编写setupProxy.js配置具体代理规则：

// common Js规范 react脚手架找到配置文件加到webpack里边用的node.js的语法 cjs  ES6是前端代码
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        proxy('/api1', { //  遇到/api1的前缀请求，就会触发该代理配置
            target: 'http://localhost:5000', // 请求的第三方接口
            changOrigin: true, // 控制服务器收到的请求头中的host字段的值
            pathRewrite: {
                '^/api1': '' // 重写请求路径 将/api1替换成空字符
            }  
        })
    )
}
/**
 * changOrign设置为true时，服务器收到的请求头重的host为： localhost:5000
 * changOrign设置为false时，服务器收到的请求头中的host为：localhost:3000
 */

说明：
1.优点： 可以配置多个代理，可以灵活的控制请求是否走代理。
2.缺点： 配置繁琐，前端请求资源是必须加前缀