本文是客户端代理配置的几种常见方式的一部分内容，主要针对SwitchyOmega和Charles两种工具。
前言
代理服务器是开发过程中的常用工具。通过配置代理，可以统一线上线下环境，在开发阶段也访问线上地址，只不过将请求流量代理到本地服务器，这样便于调试。
Chrome插件SwitchyOmega
该插件可以通过Chrome应用商店进行下载，典型的配置过程如下：
1.新建情景模式，选择“代理服务器”
2.填写内容如下，也就是想要代理到的服务器地址和端口
3.新建情景模式，选择“自动切换模式”
4.根据项目需要配置响应的路由规则
这样，在Chrome中调试时候选择“auto switch”，对于相应地址的请求就会根据规则进行转发
Charles Web Debugging Proxy
有了SwitchyOmega，可以应对大部分使用场景。但是，考虑如下情况，SwitchyOmega就不能进行良好的配置了：
线上地址不是根路径，也就是说除了域名、端口号外还有其他服务器上的相对路径。此时，SwitchyOmega会默认把相对路径拼接在代理到的本地服务器后面，然而，本地并不存在这个相对路径，因为本地就是启动在根路径下的，线上是因为一台服务器上可能并存多个项目部署时才具有项目的相对路径。
面对这种情况，使用charles，因为它支持路径映射，也就是map remote功能，典型配置过程如下：
1.选择“proxy — proxy settings”做如下配置，这是charles服务器自身运行所在端口
2.选择“tools — map remote settings”做如下配置，下面是概览，也就是根据业务需要进行的路由匹配
3.第一条：
解释：
对于线上地址xxx.cn的/admin/ueditor资源的所有访问请求，不代理到本地，直接连接。
因为这些是第三方库的资源，不会有修改。
4.第二条：
解释：
对于线上地址xxx.cn的/admin/static资源的所有访问请求，同理，不代理到本地，直接连接。
因为这些是一些静态资源，不会有修改。
5.第三条：
解释：
对于线上地址xxx.cn的/admin的所有访问请求，是对于管理系统本身进行访问的，我们在开发过程中要随时查看修改情况，因此代理到本地。
6.第四条：
解释：
对于线上地址xxx.cn的/index.php的所有访问请求，是对于后台接口数据的请求，不是前端项目本身的内容，直接连接。
7.第五条：
解释：
对于线上地址xxx.cn的/的所有访问请求，也是对于所开发系统本身进行访问的（/admin是后台，/是客户端），我们在开发过程中要随时查看修改情况，因此代理到本地。
8.效果查看：
可以看到，针对远程线上的css文件的请求，已经被成功代理到本地服务器运行所在端口（9989）
注：要注意以上匹配规则的先后顺序，后面的不要被前面的覆盖。