H5开发代理配置大全

在H5开发中，避免不了连接第三方代理工具进行抓包，而且H5开发请求后端服务还需要转发到各种server部署环境，所以能熟练使用各种代理工具就成为前端工程师必备的一项软技能。
以下介绍两款常用的代理工具以及使用方法：

Charles

我们一般都是在浏览器中进行H5页面的绘制和网络请求，等开发完成后再部署到服务器端用手机进行测试（手机连接Charles安装证书流程大家自行百度）。在开发过程中难免遇到用Charles抓取H5页面请求后端数据，更改报文进行不同情况下UI渲染的需求，以下就以Chrome浏览器为例详细介绍怎么实现上述需求。
1，在dev环境下浏览器的默认域名是localhost,请求的后端数据也被代理到了相同的域名下，Charles默认不能抓取localhost域名下的请求，因此将localhost域名更改为 localhost.charlesproxy.com，其它都不用改；
2，勾选Charles ——> Proxy ——> macOS Proxy;
3，以上两个步骤完成以后就能够在Charles中看到浏览器发出的请求了，可以像访问普通的url链接一样进行断点设置，但是请求超时时间太短，以至于来不及更改response数据就导致后端请求canceled。我们项目中请求用的是axios，可以设置axios的超时时间axios.defaults.timeout长一点，就可以顺利地抓包改数据啦！

ps: H5的开发过程都是在浏览器中，那么在不发版的情况下怎么通过手机请求node起的本机服务进行手机端适配呢，主要有以下两种方法：
1，手机浏览器：将localhost替换成本机的ip地址，记住要带上端口号
2，手机的其它App，由于App的webview和浏览器的有区别，如果想在App查看h5页面效果，有的App可能会禁用本机ip地址的请求。这时候我们可以借助Charles抓包工具，将App允许的域名转发到localhost或者localhost.charlesproxy.com都可以，这样当代码有改动浏览器自动更新的时候手机也会同步更新，是不是很方便。

Proxy SwitchyOmega

一般情况下webpack可以通过http-proxy 代理解决H5开发环境下的跨域问题，但是还有一种方法：替换测试环境的H5文件为本地文件。
在Chrome浏览器安装Proxy SwitchyOmega插件，配置如下，这样 Chrome 下的网络请求才会走 Charles 发送。

Charles的Map Remote配置如下

这样当你在浏览器中输入测试环境的H5页面地址时，就会被转发到本地服务，后端请求依然走测试环境，跨域问题就妥妥地被解决啦