react项目中配置代理

最近在react开发的过程中遇到跨域问题，之前都是交由后端进行处理，但是本次项目调试由于特殊情况，最终交由前端进行处理，很久没有处理过跨域问题了，因此本次配置对于个人来说有些曲折，特意在此进行记录。

同时也希望能给其他有这方面需求的小伙伴们一些参考，因为再查询一些资料的过程中由于自己理解能力不够，也走了一些弯路，回归正题，接下来就归纳一下本次配置操作。

环境

1. 使用 create-react-app 创建的react项目； react V18.2.0
2. http-proxy-middleware V2.0.6

操作流程

本次实现前端代理我们使用的是http-proxy-middleware V2.0.6，来实现react工程中代理操作。

1、安装代理插件

    npm install http-proxy-middleware --save

2、配置代理并调试

（1）新增 setupProxy.js 文件

注意：该文件必须在 项目的 src 目录下 如下图：

（2）进行代理配置

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      '/api',
      {
        // 遇见'/api'这个前缀的请求，就会触发这个代理
        target: 'http://192.168.3.11:5000', // 请求转发的目标（target）地址
        changeOrigin: true, // 默认值为false，控制服务器收到的请求头中Host字段的值
        /*
          changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
          changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
          changeOrigin默认值为false，但我们一般将changeOrigin值设为true
        */
        pathRewrite: {
          '^/api': '/api'
        },
        // 去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
      }
    ),
    // 可配置多个代理
    createProxyMiddleware(
        // 如果配置 api2 则会先触发 /api 的代理
      '/2api',
      {
        target: 'http://192.168.3.11:6000',
        changeOrigin: true,
        pathRewrite: {
          '^/2api': ''
        }
      }
    )
  )
}

（3）进行接口调试

注：在进行接口调试之前，配置文件创建并配置完毕后，需要重启项目

在第二步中我们进行了代理配置，当遇到/api前缀的请求时，会触发代理将请求转发到http://192.168.3.11:5000，如下：

import { localAxiosInstance } from '@/axios/localTestAxios';

export const testApiProxy = () => {
  return localAxiosInstance.get(
    '/services/admin/SystemDic/GetPageSystemChannel',
    {
      params: {
        MaxResultCount: 10,
        SkipCount: 0,
      },
    }
  )
}

注：localAxiosInstance 是项目中封装的 axios 请求。

let localAxiosInstance = axios.create({
  baseURL: LOCAL_TEST_URL, // 常量 值为 '/api'
  timeout: 1000 * 60, //请求超时时间

  /**
   * 该属性表示跨域请求时是否需要使用凭证
   * 开启后服务器才能拿到 cookie
   * 当然后端服务器也要设置允许获取
   */
  withCredentials: true
})

（4）测试代理是否正常

当我们配置完成之后，怎样测试查看是否代理正常，当然我们可以直接运行项目看一下接口访问是否成功。

import { localAxiosInstance } from '@/axios/localTestAxios';

export const testApiProxy = () => {
  return localAxiosInstance.get(
    '/services/admin/SystemDic/GetPageSystemChannel',
    {
      params: {
        MaxResultCount: 10,
        SkipCount: 0,
      },
    }
  )
}

结果： 但是我要想看代理发起的真实路径该怎么办呢

（5）代理后查看真实路径

在 `http-proxy-middleware` 中有两个参数可以帮助我们：  
1、logLevel：  
  （1）类型：string    
  （2）可选值：'debug', 'info', 'warn', 'error', 'silent'  
2、onProxyReq   
  （1）类型：function  
  （2）作用：订阅`http-proxy`的`proxyReq`事件。  

详细参数配置，感兴趣的可以查看其文档说明。

接下来我们重新调整一下我们的 setupProxy.js 文件

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      '/api',
      {
        target: 'http://192.168.3.11:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        },
        logLevel: 'debug',
        onProxyReq: (proxyReq, req) => {
          // http请求
          console.log('[HPM] %s %s %s %s', req.method, req.originalUrl, '->', req.url);
        },
      }
    ),
    createProxyMiddleware(
      '/2api',
      {
        target: 'http://192.168.3.11:6000',
        changeOrigin: true,
        pathRewrite: {
          '^/2api': ''
        }
      }
    )
  )
}

注意：修改完配置后，重新启动当前工程项目

这个时候当前网页发起代理后的请求时，在 vscode 终端中我们会看到相关的输出

3、结语

至此，我们完成了在react项目中配置代理的操作，回想起来其实也并不繁琐，只是之前没做过，因此有些曲折罢了！！！

23年后半年太忙了，总是加班，有点儿时间也疲惫的不想写东西，很长时间没有对自己做的、经历的进行总结归纳了，今天先总结一点。

成长的路上总是曲折的，但是总是要努力奔向美好的事物，让我们一同努力，与君共勉！！！