create-react-app脚手架构建react项目后配置proxy

使用create-react-app创建项目后，在本地开发时 ，配置请求转发是常见的。配置转发之后我们在本地环境就能请求到服务器的接口。 
使用以下命令生成本地webpack配置文件

npm run eject

该命令会将配置文件暴露到scripts目录下

然后看scripts目录下的start.js源码　发现

   const compiler = createCompiler(webpack, config, appName, urls, useYarn);
    // Load proxy config
    const proxySetting = require(paths.appPackageJson).proxy;
    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
    // Serve webpack assets generated by the compiler over a web sever.
    const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
    );
    const devServer = new WebpackDevServer(compiler, serverConfig);

其中的proxySetting就为代理服务器的配置。

同事尝试发现require(paths.appPackageJson).proxy需要在package.json中添加配置。

"proxy":{
   "/rank/**":{
      "target":"http://m.kugou.com",
      "changeOrigin": true
    }
  }

 然后测试成功。