create-react-app的dev环境跨域请求代理转发-环境变量配置

请求代理

为了方便调试，通常在dev环境下调用服务端接口会有跨域问题，cra提供了比较方便的拓展方案
cra默认会读取src/setupProxy.js的导出对象作为拓展proxy的配置方案，要拓展的话需要：

1. src目录下新建setupProxy.js
2. 安装http-proxy-middleware依赖，并在setupProxy.js插入下面内容

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/devapi", {
      changeOrigin: true,
      // secure: true,
      target: "跨域接口的域名",
			pathRewrite: {'^/devapi': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    })
  );
};

上面配置的意思是会将所有/devapi下的请求都代理到配置的域名上面去，所以一般在dev阶段，都会将baseURL设置为/devapi。
修改配置之后记得重新运行。

环境变量

由于不太熟悉cra的配置，所以用了cross-env

1. npm i cross-env -D
2. 在package.json的运行命令里加上了如下配置，注意环境变量必须以REACT_APP_开头，否则会被过滤掉

"start": "cross-env REACT_APP_ENV=dev node scripts/start.js",
    "build:test": "cross-env REACT_APP_ENV=test node scripts/build.js",
    "build:uat": "cross-env REACT_APP_ENV=uat node scripts/build.js",
    "build:prod": "cross-env REACT_APP_ENV=prod node scripts/build.js",

大致意思是在运行脚本之前使用cross-env来设置环境变量，通过不同的变量名来知道当前所处的运行环境，方便做不同的配置区分，就比如上面的basrUrl。
怎么说去环境变量呢？

// REACT_APP_ENV就代表了上面命令中的变量--当然你也可以添加更多的变量
console.log(process.env.REACT_APP_ENV)