跨域这么解决
a 网站某个页面(ori.html)要 嵌套b网站中的详情页面。但是b网站中的详情页面(detail.html)的高度是动态的,要b网站告诉a网站。
解决方式:
a网站中 增加 一个cross.html页面。里面大概这么写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11" />
<title> </title>
<script type="text/javascript">
function load(){
var _heigth = getQueryStringRegExp("height");
parent.parent.resizeHeight(_heigth);
}
/**
* 获取iframe传递过来的参数
*/
function getQueryStringRegExp(name){
var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
if (reg.test(location.href)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return "";
};
</script>
</head>
<body οnlοad="load()">
</body>
</html>
a网站中的ori.html 里放一个iframe。src地址是b网站中的detail.html,并且在参数中加上cross.html 的地址。
例如:src地址 http://b.com/detail.html?callBackUrl=http://a.com/cross.html
b网站中的detail.html 中增加一个iframe。页面加载完成后,给iframe赋值src地址为 传递过来的callBackUrl地址。
因为cross.html中写的是parent.parent.方法。 所以实际上还是访问的他自己网站的内容。就没有跨域了。
测试环境使用没问题。
但是正式环境上有问题。提示401,发现response的页面是b页网站中的登录页面。。。
不知道怎么回事,cross.html不去a网站,而是在b网站找cross.html。经过搜索发现,可能是spring-security导致的。
http://blog.csdn.net/princeluan/article/details/73268637 但是我使用的网站中是spring3.x的,配置方式不一样,也不知道具体怎么配置。
打算通过nginx的配置来解决https://stackoverflow.com/questions/30731290/how-to-set-x-frame-options-allow-from-in-nginx-correctly
但是好像chorme浏览器不支持某种配置。上篇文章中提到:Chrome does not support allow-from
另外参考:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
单独访问对应的cross.html页面是ok的,但是在detail.html中的iframe访问就不行。跳转的是detail.html所在网站同名的页面里去了。经过观察发现,请求都是一样,只不过一个有refer,一个没有refer。没有refer的正常。于是,在对应的b网站的cross.html中加入了location.replace(this.location.href) . 这样变相的去掉了refer。就行了。