线上前端静态资源代理到本地的几种方式

前言

我是一个小前端，前段时间开始支持集团监控平台业务。
当我拉下代码，开启本地服务，出现了一大堆请求错误。
原因是：本地的host是127.0.0.1，而接口调用的是线上数据。
接口的host和平台url的host都是x.alibaba-inc.com。
怎么办？我要跨域。。
直接修改hosts是不行的，使用http的withCredentials为真，导致允许跨域的源必须是本地，会导致监控平台对外提供的接口出现问题。
。。。
然后我请教了@绘萌师兄，师兄提出可以把线上资源代理到本地。
OK，怎么把线上资源代理到本地呢？
经过一番折腾，我总结出如下四种方式。

方式

1、抓包类工具

常用的抓包工具有Wireshark、Fiddler、Charles。
这里我拿Charles举例子,把线上资源代理到本地叫本地文件映射。
菜单路径：Tools -> Map Local。
与本地文件映射对应的叫远程映射文件映射，远程映射文件映射将路径映射到其他服务器上，而本地映射则映射到本地磁盘上。

Map From 设置好线上文件 A 的相关信息，Map To 里选择本地资源，请求文件 A 时，就会返回指定的本地文件。
图中我把日常前端所有资源都代理到本地了。

2、浏览器插件

Chrome的相关插件：Proxy SwitchySharp、ReRes
Firefox的相关插件：FoxyProxy、Autoproxy

试一把：

本地修改代码，发现线上完全同步了，完美！

传送门：
Proxy SwitchySharp
ReRes
FoxyProxy
Autoproxy

3、Nginx

原理：使用nginx反向代理，起localhost的http服务，本地代理层拦截静态资源请求，并返回本地的静态资源；放过数据请求，将数据请求代理成线上真实的地址。
首先，要理清楚前端的静态资源请求和数据请求。然后对nginx.conf进行配置。到这一步，我们已经能接触到线上，但是线上访问有跨域限制，所以需要绑定host，使得到线上的请求的不受跨域限制。

配置文件内容如下：

user root;
worker_processes  4;

pid        logs/nginx