Create React App(CRA)本地开发配置代理
前言
现代的前端开发，通常使用前后端分离的形式，前端专注页面，数据来源于后端接口。这种开发方式使得职责更加明确且项目文件也更加的清晰起来，但是在本地开发过程中则有一点小问题：我如何调用后端接口？如果直接调用服务器上的接口，或者本地启动后端项目，由于端口不同，都会出现跨域问题，而服务端配置允许跨域也不太合适，那么，能否通过设置代理来绕过浏览器限制呢？
声明
Create React App以下简称CRA。
根据CRA文档，本地配置代理有两种方式：
- 在
package.json中新增属性proxy来设置目标地址。 - 通过
http-proxy-middleware模块手动配置灵活的代理。
两种方式各有好处，通过在package.json文件增加proxy属性的方式非常简单，一行代码即可解决代理问题，但是这个proxy地址没法根据配置进行动态切换，且package.json文件是需要提交到代码仓库的，如果每个人都有不同的目标地址，则package.json一定被大家改来改去且发生合并冲突。另外一种方式则是通过手动配置http-proxy-middleware的方式，根据CRA文档的描述，分为三个步骤：
配置setupProxy.js：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:5000",
changeOrigin: true
})
);
}
在src目录下创建setupProxy.js文件：
$ mkdir src\setupProxy.js
安装http-proxy-middleware模块：
$ npm install http-proxy-middleware --save
$ # 或者
$ yarn add http-proxy-middleware
然后启动项目，CRA会自动将src/setupProxy.js注册，这样请求则被代理到http://localhost:5000。
可问题还是没有被解决，setupProxy.js依然会被提交到代码仓库，所以target依然不能写死配置。但是setupProxy.js中已经可以使用node环境变量了，因此，我们做如下配置：
配置setupProxy.js中的target值为process.env.REACT_APP_PROXY_ENDPOINT：
...
createProxyMiddleware({
target: process.env.REACT_APP_PROXY_ENDPOINT,
changeOrigin: true
})
...
在.env.development.local文件新增一行：
REACT_APP_PROXY_ENDPOINT=http://localhost:5000
在项目根目录新建.env.development.local文件：
$ mkdir .env.development.local
至此，你已经可以根据环境变量来动态的切换代理的地址，且此文件无需提交到代码仓库。
