node-proxy 如何为前端开发提效？

前言

什么是代理服务？

首先是一个**服务**，信息都会发给代理服务器，由其转发，并且将收到的应答回送给请求方。

前端为什么要用代理服务？

"万恶之源" - **同源策略**：
导致跨域 -> 为了解决跨域 -> coder们漫长的“抗战史” -> 最终也得到解决战争的方法之一

使用场景

一、解决登录场景

**问题：
羚客mcn为什么需要nginx做代理？**

多个平台依赖某个平台的登录，需要共享登录信息缓存到同一个域下，羚客mcn一个典型，且无sso

二、前后端联调 (粗粒度/细粒度)

**场景**：
开发某个模块中的一个表格，但是这个表格层级比较深，外层的组件又依赖很多数据权限，才能展示出这个表格
**问题**：
**现在我们是怎么解决？**
**最理想的状态是怎么样的？**

1. 单一请求目标源

2. 多请求目标源 （有能力的话让后端加一个前缀）

   1. 测试环境与yapi （mock阶段） 部分页面需要对接测试环境，才有权限打开
   2. 测试环境与后端本地服务（联调阶段）

三、“插件”模式，一人配置多人使用（团队内部）

目前vue内部做的proxy，就比较适用，以项目维度。
最大的问题是:无法热更新，本地联调后端修改地址需要重启。
将解决方案收口在 LNP 不失为一个好的方案。
将yapiMock、测试、预发、正式，已项目的维度保存在LNP里。
减少vue.config.js 带来的配置成本，与内存消耗等；
且配置的规则是一致的，也是一种更加平滑地方式学习proxy；

1. 按照项目的维度进行配置

// 如何新增
// 1.拉一个新分支
git checkout -b yyyy-mm-dd_add_config
// 2.新增配置
// 在config下新建一个配置文件，以仓库名命名，用于区别应用；

如何使用

配置项：

参数	说明	类型	是否必填
prefixPath	匹配的path	string	是
target	代理地址	string	是
note	说明信息	string	否
pathRewrite	重写区域	string	否

优先级：从上往下去匹配，匹配到则执行（和vue-router一致）

例子：

1. http://localhost:3100/api/mock/linkmcn-task/api/contract/shop/list
2. http://localhost:3100/api/linkmcn-common/api/message/getCount
3. http://localhost:3100/organization#/contractOA
4. http://localhost:3100/

  {
    prefixPath: '/api/mock/',
    target: 'http://10.10.0.121:3000/mock/41',
    note: 'yapi',
    pathRewrite: {
      '^/api/mock/': '/'
    }
  },
  {
    prefixPath: '/api/',
    target: 'http://testapi.linkmcn.cn',
    note: '测试、预发、正式环境代理',
    pathRewrite: {
      '^/api/': '/'
    }
  },
  ...
  {
    prefixPath: '/',
    target: 'http://localhost:8383',
    note: '主站'
  }

优缺点与展望

优点：

1. 和vue devServer 的 proxy 配置以及前端node相关的代理 **99%**一致，可以说是一处学习到处使用，因此是很有必要性； 可理解性（底层）：node proxy = devServer proxy > nginx
2. 可以解决目前开发环境中遇到的**98%**的代理场景，无需额外依赖工具；
3. 跨平台：window、macOS
4. 热更新，修改配置即可生效，无需像vue中devServer一样，修改需要重启生效；
5. 基于目前场景，后端访问前端页面进行自测或调试无需使用lightProxy、无需开浏览器跨域（这个还是有价值的）；

缺点：

1. 需要单独启动一个项目；
2. 依赖node的环境；

展望：

通过electron生成桌面端app，进一步降低配置成本与使用成本

特别鸣谢

内测与推广

奈特、浪子彦

仓库地址