fiddler模拟mock -- 解决跨域访问（CORS）

Fiddler模拟接口返回数据

前面其实大概写过如何模拟返回数据，参见：利用fiddler快速模拟mock 这次主要写如何处理诸如模拟带跨域访问mock的问题

1.什么是CORS

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种机制，该机制使用附加的HTTP 头来告诉浏览器，准许运行在一个源上的Web应用访问位于另一不同源选定的资源。 当一个Web应用发起一个与自身所在源（域，协议和端口）不同的HTTP请求时，它发起的即跨源HTTP请求。

2.什么情况下mock需要模拟跨域访问

正常情况下我们使用fiddler的mock功能，浏览器正常展示我们所构造的数据，但有时候并未按照预期显示，打开控制台发现有报错，此时便需要对此类接口做单独处理

3.如何处理CORS类数据模拟问题

3.1.方案1：使用fiddler 的filter功能
在filter菜单页底部勾选response header ->的Set response header，分别填入Access-Control-Allow-Origin 和允许的域名

response header

我们可以看到，挡板返回的响应头已经带上了Access-Control-Allow-Origin

此功能可以应对一般的跨域访问，但在某些浏览器上，还需要验证 Access-Control-Allow-Credentials 字段，我们可以通过修改fiddler的CustomRules.js文件来实现

3.2.方案2：修改CustomRules.js文件。
Rules - Customize Rules，修改 OnBeforeResponse函数

在static function OnBeforeResponse(oSession: Session) 模块下增加

    if(oSession.uriContains("要处理的url")){
        oSession.oResponse["Access-Control-Allow-Origin"] =  "允许的域名";
        oSession.oResponse["Access-Control-Allow-Credentials"] = true;
    }

测试一下

大功告成

ps:在点击Rules - Customize Rules后可能提示文件未找到，可以使用搜索工具查找fse2文件所处位置，一般在Fiddler\ScriptEditor下，可以在tools-options-tools下修改