使用fiddle处理跨域

认真的用fiddle处理跨域

相信不少前端的同窗都或多或少被跨域这个问题烦恼过,网上不少处理的方式其实都是要后端处理,
用fiddle来处理 ,就没必要看后端的脸色了,本身安安心心的倒腾接口,何乐而不为。javascript

在使用fiddle处理跨域以前,所须要注意的:html

  • 一、是http请求仍是的https请求,若是是https请求的话,要导入下证书,具体的步骤的:
  • 二、下载证书 点击下载
  • 三、下载完后双击安装便可。
  • 四、而后是fiddle的一些配置,能够参考下这篇文章只须要看前面半部分的配置便可
  • 五、能够输入 https://www.baidu.com 测试下是否可以捕获https请求。
  • 六、到这里前期工做基本完成。
要区分须要处理跨域的场景

一、网上百花撩乱的fiddle处理方式前端

若是去搜索fiddle处理跨域,想必会搜索出来满屏幕的fiddle的处理方式。
不能用的不能说是错的,只是可能不适用当前本身所须要的场景。java

二、场景1,用本地的文件来替代网络上的文件,进行规则替换git

这类的文章少说占了搜索结果的一半,github

例如csdn的一篇 前端开发fiddler跨域请求代理小程序

实际上就是对线上的文件进行替换,单个替换,正则匹配都行。segmentfault

替换成功后,即可以在本地修改代码使之生效。后端

三、场景2,修改的Customize Rules,一般咱们都这这类去修改规则,才能解决本身的跨域问题跨域

值得注意的是,在这个场景值其实也分为两块,一块是在OnBeforeRequest中,还有一块是在OnBeforeResponse中,
就是一个发送请求以前,另外一个是在发送请求以后响应以前 搞清楚了这个之后,就很容易知道本身在哪一个地方,去添加什么代码了

如图所示:

具体举例说明:

一、当需求在请求返回的时候解决跨域,要设置 Access-Control-Allow-Origin:*

       static function OnBeforeResponse(oSession: Session) {
        if (m_Hide304s && oSession.responseCode == 304) {
            oSession["ui-hide"] = "true";
        }
        oSession.responseCode=200;
        oSession.oResponse.headers.Add("Access-Control-Allow-Headers", "content-type,x-requested-with");
        oSession.oResponse.headers.Add("Access-Control-Allow-Origin","*");
    }

能够参考 这篇文章

二、当要设置请求头部的时候,就须要在OnBeforeRequest作文章了

  if (oSession.HostnameIs("xxx.xxx.com")){
          oSession.oRequest.headers.Remove("Origin");
      }

例如能够针对特定的域名移除掉Origin

此外也能够处理重定向

      var origin_host="172.16.11.21";
            var origin_port="8080";
            var origin_domain=origin_host+":"+origin_port;
            var replace_host="www.hongbaorili.com";
            var replace_port="80";
            var replace_domain=replace_host+":"+replace_port;

            if(oSession.host==origin_domain){
                oSession.host=replace_domain;
                }

            if ( (oSession.PathAndQuery == (origin_host+":"+origin_port))) {
                oSession.PathAndQuery = replace_host+":"+replace_port;
            }

好比 fiddler重定向本地服务器URL到线上URL

结尾:

其实在Customize Rules.js这个文件中还能够处理不少场景下的东西,有兴趣的话能够本身再多研究,另外这一篇文章,也介绍的蛮多详情点,点击这里

这段时间都一直浸淫在小程序当中,有愿意讨论的童鞋欢迎,目前小程序已稳定上线2个多月,社区类的小程序。

转载请注明原文地址 https://www.cnblogs.com/star-wind/p/10341573.html:谢谢

个人github,欢迎拍砖

相关文章
相关标签/搜索