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、安装代理插件

js 复制代码
    npm install http-proxy-middleware --save

2、配置代理并调试

(1)新增 setupProxy.js 文件

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

(2)进行代理配置

js 复制代码
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,如下:

js 复制代码
import { localAxiosInstance } from '@/axios/localTestAxios';

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

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

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

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

(4)测试代理是否正常

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

js 复制代码
import { localAxiosInstance } from '@/axios/localTestAxios';

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

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

(5)代理后查看真实路径

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

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

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

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

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

相关推荐
热爱编程的小曾22 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin33 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox