这两天测试同学反复来找我，说他们无法mock数据，导致好多状态难以复现。因为在做连续看视频领金币的功能，有进度条，每个节点还有额外操作，所以他们要覆盖每个过程来测试。

有个同学说自己页面https无法抓取到，被我猜测了一番，说是不是换了手机或者电脑，果然，他换了电脑(俩月了)，我不知道他这么久是怎么测试的[捂脸]，今天主要是想解决一个代理本地文件的问题，就像这个项目，每个状态都需要验证，后端不可能给他那么多状态，即便给了，那这个状态过去了，就进入下一个状态，再验证这个状态，可能得重复很多步骤，那么测试同学就要造数据，最好是本地数据，随时改随时看效果。

先来说说前端的实现方式，毕竟开发走在这种多个状态的复现操作之前，而且还要做界面，测试只是在看，前端的做法有几种：

1、写死数据，做页面最简单实用的方法；

2、在项目中新增一个mock服务，监控接口请求，匹配请求的url，返回对象中的json，达到使用本地数据的目的；

3、测试服务器配置，公司有个服务，自定义url和对应的response，用charles代理一下接口过去。

那么测试同学测试多种状态要怎么办呢？其实方法3是可以的，但是说实话，要去服务器上改来改去，也不是很方便，下面就来说下百利无一害，十全十一美的方法，charles提供，就是map local，它能让你的请求代理到本地一个json文件，想怎么改就怎么改，什么临界状态应有尽有。

1、右击你的接口，保存出来一份接口返回的数据

2、Tools -> Map Local，添加代理数据

上面箭头已经指示出步骤，添加服务接口，选择要代理的文件，就是上一步保存下来的文json件。

好了这时候再去访问的时候就可以代理这个接口了，可以尝试改动保存下来的文件……网上好多资料都是这么说的。

做梦吧，可结果是，从charles看是有数据的，但是页面上始终没有，接口返回的response是空的，请求的Status是0，如果页面上有Vconsole的话应该是显而易见的。问题在哪呢？charles代理的是路由，所以你一个json文件要当作一个网络请求，明显缺少网络头啊，那么：

3、通过rewrite添加或者修改头部信息，伪造网络请求

先在1处建立标示，在2中添加请求接口的链接，在3里需要一条一条添加网络的头部协议，我这里写得比较杂，其实写主要的几点就可以Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods、Content-Type、Status

这时候再去刷新页面看效果吧！

参考：https://www.jianshu.com/p/2ab8c6393f77