react配置反向代理—排坑记

1、先安装http-proxy-middleware

npm i http-proxy-middleware

在src文件夹下创建setupProxy.js文件，以下为代码，有详细注释

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

module.exports = function(app) {
  // /api 表示代理路径
  // target 表示目标服务器的地址
  app.use(
    proxy('/users', {
    // http://localhost:8080/ 地址只是示例，实际地址以项目为准
      target: 'http://localhost:5001/',
      // 跨域时一般都设置该值 为 true
      changeOrigin: true,
      // 重写接口路由
    //   pathRewrite: {
    //     '^/api': '' // 这样处理后，最终得到的接口路径为： http://localhost:8080/xxx
    //   }
    })
  )
}

2、create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置， 配置成如下：

"proxy":{
   "/manage":{
      "target":"http://admintest.happymmall.com",
      "changeOrigin": true
    }
  }

create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型， 配置成如下：

"proxy": "http://www.wyunfei.com"  // 配置你要请求的服务器地址