Create React App(CRA)本地开发配置代理

2021 年 03 月 11 日

5211 次浏览

2139字数

## 前言
现代的前端开发，通常使用前后端分离的形式，前端专注页面，数据来源于后端接口。这种开发方式使得职责更加明确且项目文件也更加的清晰起来，但是在本地开发过程中则有一点小问题：我如何调用后端接口？如果直接调用服务器上的接口，或者本地启动后端项目，由于端口不同，都会出现跨域问题，而服务端配置允许跨域也不太合适，那么，能否通过设置代理来绕过浏览器限制呢？

#### 声明
* `Create React App`以下简称`CRA`。

根据[CRA文档](https://create-react-app.dev/docs/proxying-api-requests-in-development)，本地配置代理有两种方式：
* 在`package.json`中新增属性`proxy`来设置目标地址。
* 通过`http-proxy-middleware`模块手动配置灵活的代理。

两种方式各有好处，通过在`package.json`文件增加`proxy`属性的方式非常简单，一行代码即可解决代理问题，但是这个`proxy`地址没法根据配置进行动态切换，且`package.json`文件是需要提交到代码仓库的，如果每个人都有不同的目标地址，则`package.json`一定被大家改来改去且发生合并冲突。另外一种方式则是通过手动配置`http-proxy-middleware`的方式，根据`CRA文档`的描述，分为三个步骤：
1. 安装`http-proxy-middleware`模块：
    ```shell
    $ npm install http-proxy-middleware --save
    $ # 或者
    $ yarn add http-proxy-middleware
    ```
2. 在`src`目录下创建`setupProxy.js`文件：
    ```shell
    $ mkdir src\setupProxy.js
    ```
3. 配置`setupProxy.js`：
    ```js
    const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
        app.use(
            "/api",
            createProxyMiddleware({
                target: "http://localhost:5000",
                changeOrigin: true
            })
        );
    }
    ```
然后启动项目，`CRA`会自动将`src/setupProxy.js`注册，这样请求则被代理到`http://localhost:5000`。

可问题还是没有被解决，`setupProxy.js`依然会被提交到代码仓库，所以`target`依然不能写死配置。但是`setupProxy.js`中已经可以使用`node`环境变量了，因此，我们做如下配置：
1. 在项目根目录新建`.env.development.local`文件：
    ```shell
    $ mkdir .env.development.local
    ```
2. 在`.env.development.local`文件新增一行：
    ```txt
    REACT_APP_PROXY_ENDPOINT=http://localhost:5000
    ```
3. 配置`setupProxy.js`中的`target`值为`process.env.REACT_APP_PROXY_ENDPOINT`：
    ```js
    ...

createProxyMiddleware({
        target: process.env.REACT_APP_PROXY_ENDPOINT,
        changeOrigin: true
    })

...
    ```
至此，你已经可以根据环境变量来动态的切换代理的地址，且此文件无需提交到代码仓库。

# Reference
* [CRA Proxying API Requests in Development](https://create-react-app.dev/docs/proxying-api-requests-in-development)
* [CRA Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables)

最后修改：2021 年 09 月 29 日