乐趣区

关于前端:HelloProxy-前端代理工具

jiezi

1、背景

1.1、现状

前端工程师在开发我的项目的时候，通常会在 webpack.config.js 或者 vue.config.js 中配置代理转发，以便解决本地调用后端接口时存在的跨域问题。如下：

  devServer: {
    proxy: {
      '/': {
        target: 'http://www.dev.com', // 开发环境
        //target: 'http://www.dev1.com', // 后端 1      
        //target: 'http://www.dev2.com', // 后端 2
        ws: false,
        changeOrigin: true
      }
    }
  }

1.2、痛点

这个配置的确让咱们省心不少，能够十分不便的调用后端接口，不过大家能够回顾一下，在应用过程中是否碰到如下问题：

  • a、每次切换环境的时候须要批改配置，重启我的项目，十分耗时，特地是一些体积宏大的我的项目，每次重启须要期待 1 分钟甚至更长；
  • b、多人开发同一我的项目的时候有可能应用不同的环境，批改后的配置文件随代码一起提交后造成后续的抵触；
  • c、切换环境是通过正文无用环境，放开代理环境进行的，十分低效；
  • d、调用某些环境的接口须要携带特定的头字段才有权限调用，比如说 Authorization；

以上问题想必大家都或多或少遇到过，那么有什么办法能够将这个过程优化，进步咱们的效率呢？上面要介绍的一款自研工具就能解决以上问题。

2、工具介绍

2.1、简介

该工具应用 electron+vue 开发，具备如下性能：

  • a、新增、编辑、删除、启动、暂停代理工作等；
  • b、每个代理工作可配置多个代理环境，反对一键切换；

<!—->

  • c、导入、导出配置文件。

2.2、应用留神

  • a、该工具服务启动端口为 12345，应用前请保障没有其余程序占用该端口；
  • b、因为 5000 以前的端口容易被其余程序占用，所以增加和编辑代理工作时，端口请管制在 5001-65535 之间【工具内会有提醒】。

3、工具应用

3.1、新增工作

留神：右侧配置项中的 headers 字段【可自行添加，如下面提到的 Authorization】会混入到源申请的头字段中，随着接口的转发一起传给指标地址，以便指标地址可能进行相应的身份甄别。

3.2、编辑工作【略过】

3.3、删除工作【略过】

3.4、启动工作

3.5、查看代理后的成果

3.6、切换代理环境【切换到“好 123”】，查看成果

3.7、在 vue.config.js 中应用 

devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:5555', // 只配置一个环境即可，在 hello-proxy 工具中切换环境
        ws: false,
        changeOrigin: true
      }
    }
  }

从下面能够看出应用该工具后，咱们只需在 vue.config.js 或者 webpack.config.js 中配置一个地址，切换环境在工具中操作即可。

4、治理配置文件

下面有提到痛点中有一个是多人合作的时候产生的，其实多人合作的时候还有个问题，就是雷同的我的项目在 A 那里配置了，B 要开发的时候不可避免地也要配置一次，所以本工具也提供了相干配置的导出性能。理论应用的时候能够在 svn 或者 git 中起一个目录专门保护该配置，后续新增开发的时候间接拉取改配置，而后导入到工具中就能够了，十分不便。

4.1、导出

备注：本工具的配置数据是通过 json 文件保留的，并且辨别了工作列表数据和环境列表数据，所以须要导出两次。

4.2、导入

将之前导出的工作和环境文件对应导入即可，如图：

备注：文件名称须要一一对应，否则工具不能失常工作。

5、下载 [安装程序]

https://pan.baidu.com/s/1XwZG…

6、理论应用截图

关注“前端大会”，获取更多内容……

退出移动版