Charles通过Rewrite越过OPTIONS请求拦截

前言

身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人

开开心心学技术大法~~

来了来了，他真的来了~

正文

场景

经常移动端开发的大家应该都用过charles的map local代理请求资源到本地这样的功能，或者类似的。

有一种场景是，要代理的请求是跨域CORS请求，且请求是复杂请求，所以在发送真正的post请求前会有options预检请求。

如果我们代理了这个域名到本地，就会连options请求也被代理，但是直接map local到本地资源之后默认的response header是不符合options请求对于reponse header的要求的。

导致请求到options就会被终止，没办法走到真正的post请求来。

所以我们的map local并没有真正的成功。

解决思路

那怎样绕过OPTIONS请求呢？或者说能否模拟成OPTIONS请求？

答案是肯定的，我们可以通过charles的rewrite来重写map的请求的response header，重点是模拟options的请求头。

分析OPTIONS请求

模拟OPTION请求的response header关键是这三个字段

• Access-Control-Allow-Origin告诉客户端允许的origin
• Access-Control-Allow-Headers告诉客户端允许传递的headers
• Access-Control-Allow-Methods告诉客户端允许使用的请求methods

当然你也可以将涉及到CORS的字段补齐，再添上

• Access-Control-Allow-Credentials告诉客户端是否允许添加cookie
• Access-Control-Expose-Headers告诉客户端响应头允许暴露的headers

rewrite功能详解

从Charles的Tools上选择Rewrite...，或者快捷键cmmand + shift + r唤起rewreite弹框。

具体如下：

我们根据上面标的序号来描述下大概功能

1.是否开启rewrite功能
2.新增一个新的rewrite的条目
3.新增一个要rewreite的请求url
4.在上面选中的请求url上新增你的重写规则

前面三步不需要多说，正常操作就可，第四步点击之后会出现一个Rewrite Rule的弹窗

从上面我们我们可以看到

• Type是我们要rewrite的类型

正式rewrite

依据上面我们分析的OPTION请求的关键字段，我们只需要依次将要rewreite的字段录入即可

1.打开rewrite弹窗，录入要重写的请求url
2.唤起重写规则弹窗来新增重写规则
3.Type选为Add Header
4.New的Name录入Access-Control-Allow-Origin，Value录入允许跨域的origin（或者直接参考map之前的正常OPTION请求的内容，这个最为简洁方便）
5.点击ok
6.重复3,4,5步骤，直到录入所有要录入的字段
7.之后点击rewrite弹窗的ok，记得要确认下是否已经开启了重写规则

享受成果

之后再次请求接口，发现之前的预检接口可以正常返回，并且不影响真正接口的请求。

这是预检请求的具体信息

真正请求也可以正常返回