哈喽,艾瑞巴蒂,有没有负责前端测试的小伙伴,让我看到你们的双手!!!接下来我要和你分享的是前端测试的故事,一起来听听吧!~
故事背景:
最近小编一直在测试移动端Web页面,在执行异常数据测试用例时,奇怪的事情发生了,页面出现了空白。测试步骤如下:
●使用Fiddler工具的AutoResponder直接返回本地构造的数据文件
Ps:执行异常数据相关用例为了保证Title过长或者为空时,页面是否合理显示
Question:
为什么会空白呢?同样是直接给数据请求一个特定的返回,为什么信息流APP没有问题手机Web页面就出现了空白?
问题原因:
通过Fiddler抓包对比发现了手机Web页面的一些异样
●信息流APP的网络请求返回
●手机Web页面的网络请求返回
Ps:那么问题又来了,为什么手机Web页面要这样返回数据呢?为了解决什么问题呢?请继续往下看答案就要揭晓了!~
什么是跨域?
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。说白了就是POST、GET的URL与你当前访问的网站、域名不同。只要协议,域名,端口有任何一个的不同,就被当作是跨域。
何时会出现跨域?
关于JavaScript能否跨域通信的详细说明,见下表: http://www.a.com/a.js访问以下URL的结果:
为什么浏览器限制跨域访问?
原因就是安全问题:
●如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题:
用户访问www.bank.com ,登录并进行网银操作,这时cookie啥的都生成并存放在浏览器用户突然想起件事,并迷迷糊糊地访问了一个邪恶的网站 www.xss.com
这时该网站就可以在它的页面中,拿到银行的cookie,比如用户名,登陆token等,然后发起对www.bank.com 的操作。
如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。
为什么要跨域?
跨域这东西其实很常见,例如我们可以把网站的一些脚本、图片或其他资源放到另外一个站点。
例如:比如说今日热点头条H5版本:http://yaokan.toutiao.sogou.com,当请求频道列表(http://itoutiao.sogou.com/v1/getnewslist?h=123)两个域名之间就涉及跨域问题,但是页面有需要使用列表请求返回的数据,所以必须要跨域。
前后端如何实现跨域呢?
●前端
<meta content="text/html; charset=utf-8"http-equiv="Content-Type"/> <scripttype="text/javascript"> functionjsonpCallback(result){ alert(result.a); alert(result.b); alert(result.c); for(variinresult) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } } </script> <script type="text/javascript"src="http://example.com/a.php?callback=jsonpCallback"></script> Ps:前端将Callback返回后的数据以一个变量的Value的形式传入代码中进行后续逻辑 后端 <?php //服务端返回JSON数据 $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); $result=json_encode($arr); //动态执行回调函数 $callback=$_GET['callback']; echo$callback."($result)"; Ps:后端将预期要返回的数据以固定格式返回给前端,例子:Callback(“Value”) |
如何解决?
通过Fiddler工具的JavaScript脚本就可以解决,代码如下:
●NO.1
●NO.2
上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。