前端开发时，需要 mock 或请求对应的数据，选择一种合适的方式获取数据可以大大提高开发效率
获取数据方式
本地 mock
- 页面接口请求到达
dev server之后会转发到mock服务上，然后返回mock数据 - 页面静态资源请求会到达
dev server，然后直接返回静态资源
优点
mock数据只需要配置一次，无需后续的额外操作
缺点
- 无法服用线上接口数据
- 项目中可能会出现许多
mock数据相关的代码 - 接口之间无关联性
直接请求线上数据
- 页面静态资源请求会到达
dev server，然后直接返回静态资源 - 通过绝对地址或者浏览器代理的方式转发请求到线上服务
问题
- 通过硬编码绝对路径的方式对代码入侵较大，可以通过浏览器代理插件的方式实现对接口的转发
- 当接口需要登陆时，可在浏览器插件中实现注入对应环境
cookie的功能
优点
- 可以复用线上接口数据
- 接口之间存在联动和业务逻辑
缺点
- 需要安装额外的插件
- 需要在项目之外做额外的配置
devServer 代理转发
- 页面静态资源请求会到达
dev server，然后直接返回静态资源 - 通过
dve server把接口代理转发到对应服务上
问题
- 当接口需要登陆时，可在浏览器插件中实现把对应环境
cookie注入到开发服务页面下的功能
优点
- 可以复用线上接口数据
- 接口之间存在联动和业务逻辑
缺点
- 需要安装额外的插件
- 需要在项目之外做额外的配置
charles 代理转发
- 页面静态资源会按照规则转发到
dev server上，然后直接返回静态资源 - 接口请求会按照规则转发到远端服务
问题
- 当接口需要登陆时，本地服务转发需要先注入对应环境的
cookie才可以请求
优点
- 可以复用线上接口数据
- 接口之间存在联动和业务逻辑
- 便于切换环境和账号
缺点
- 需要安装额外的软件
- 需要学习 charles 相关的配置