跨域问题

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。解决跨域总结了几下几种方式：
一、跨源资源共享（CORS）
在发送请求时，请求页面的源信息（协议、域名和端口）为：http://www.baidu.com
如果服务器认为这个请求可以接受，就在后台代码中设置Access-Control-Allow-Origin的值为 http://www.baidu.com（如果服务器认为任何请求都可以接受就设置为“*”）

二、JSONP
JSONP跨域的原理：
通过动态创建一个script标签，script标签不受同源策略（CORS）限制，调用服务器端js脚本，服务器会返回一个用传过去的回调函数名包裹着服务器返回的json数据的函数执行，来执行相应的函数。

用原生js模拟jquery封装的jsonp：
var $ = {}; $.ajax = function(param){ var url = param.url; var success = param.success; var callback = param.jsonpCallback; //callback是在全局作用域执行的 window[callback] = function(data) { success(data); } var script = document.createElement("script"); script.src = url + "&callback=" + callback; document.getElementsByTagName("head")[0].appendChild(script); }

注： JSONP仅适用于HTTP的GET请求
JSONP有两点不足：
1、JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JOSNP调用之外，没有办法追究
2、要确定JSONP请求是否失败应不容易

三、图像Ping(使用img标签)
一个网页可以从任何网页中加载图像，不用担心跨域不跨域。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping,浏览器得不到任何具体的数据，但通过监听load和error事件，能知道响应什么时候接收到。
来看下面的例子：
var img = new Image(); img.onload = img.onerror = function() { alert("Done!"); }； img.src = "http://www.example.com/test?name=Nicholas";
这里创建了一个Image的实例，然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。

注：图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像Ping有两个主要的缺点：
1、只能发送GET请求
2、无法访问服务器的响应文本

四、window.postMessage和iframe
window.postMessage的功能是允许程序员跨域在两个窗口或者frames间发送数据信息。基本上，它就像是跨域的Ajax，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。除了IE6、IE7之外的所有浏览器都支持这个功能。
比较重要的事件:
source - 消息源，消息的发送窗口或者iframe
origin - 消息源的URI（可能包含协议、域名和端口），用来验证数据源
data - 发送方发送给接收方的数据

注：尽管Internet Explorer8和Internet Explorer9都实现了postMessage API，但它们也有一些局限性。最明显的一点就是它们只允许向iframe元素发送消息。如果尝试向特定的窗口或选项卡发送消息，都会提示“No such interface supported”。

示例：
页面A.html在webstorm里，domain="http://localhost:9090"
页面B.html在eclipse里，domain = "http://localhost:8080"

示例一：
A页面里的iframe嵌套B页面，A页面给B页面（外面给里面）发送内容，B页面给A页面返回内容，代码如下：
A.html代码如下:
<head lang="en">
<meta charset="UTF-8">
<title>A给B发送</title>
</head>
<body>
A-receive:<span id="receive"></span>
<button onclick="send()">点击</button>
<iframe id="myIframe" src="http://localhost:8080/col/baidu-demo/html/receive1.html" frameborder="0"></iframe>
<script>
`
var domain = "http://localhost:8080";
var message = 'hello,B';
var iframe = document.getElementById("myIframe").contentWindow;
function send() {
iframe.postMessage(message, domain);
}

    window.addEventListener('message', function(event) {
    if(event.origin != "http://localhost:8080") return;
             console.log('received:' + event.data, event);
             document.getElementById("receive").innerHTML = event.data;
     },false);

</script> </body> B.html代码如下： <head> <meta charset="UTF-8"> <title>A给B发送</title> </head> <body> <div>hello</div> B-receive:<span id=receive></span> <script>
var domain = "http://localhost:9090";
window.addEventListener('message', function(event) {
if(event.origin != "http://localhost:9090") return;
document.getElementById("receive").innerHTML = event.data;
event.source.postMessage("hello,A", domain);
},false);
`
</script>
</body>

示例二：
A页面里的iframe嵌套B页面，B页面给A页面（里面给外面）发送内容，代码如下：

A.html代码如下:
<head lang="en">
<meta charset="UTF-8">
<title>B给A发</title>
</head>
<body>
A-receive:<span id="receive"></span>
<iframe id="myIframe" src="http://localhost:8080/col/baidu-demo/html/receive.html" frameborder="0"></iframe>
<script>
window.addEventListener('message', function(event) { if(event.origin != "http://localhost:8080") return; console.log('received:' + event.data, event); document.getElementById("receive").innerHTML = event.data; },false);
</script>
</body>
B.html代码如下:
<head>
<meta charset="UTF-8">
<title>给A发</title>
</head>
<body>
<div>hello</div>
<button onclick="send()">点击</button>
<script>
var domain = "http://localhost:9090"; var message = 'hello,A'; console.log('blog.local:sending message:' + message); function send() { parent.postMessage(message, domain); }
</script>
</body>
示例三：
A页面打开B页面，A页面给B页面发送内容，B页面给A页面返回内容

A.html代码如下：
<head lang="en">
<meta charset="UTF-8">
<title>A给B发</title>
</head>
<body>
A-receive:<span id="receive"></span>
<button onclick="send()">点击</button>
<script>
`
var domain = "http://localhost:8080";
var message = 'hello,B';
var openPage = window.open("http://localhost:8080/col/baidu- demo/html/receive2.html");

 function send() {
       openPage.postMessage(message, domain);
};

 window.addEventListener('message', function(event) {
       if(event.origin != "http://localhost:8080") return;
       document.getElementById("receive").innerHTML = event.data;
},false);

</script> </body> B.html代码如下： <head> <meta charset="UTF-8"> <title>A给B发</title> </head> <body> <div>hello</div> B-receive:<span id=receive></span> <script>
var domain = "http://localhost:9090";
window.addEventListener('message', function(event) {
if(event.origin != "http://localhost:9090") return;
document.getElementById("receive").innerHTML = event.data;
window.opener.postMessage("hello,A",domain);
},false);
`
</script>
</body>

参考文献：
http://www.webhek.com/window-postmessage-api/
《JavaScript高级程序设计》（第三版）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 195,898评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,401评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,058评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,539评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,382评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,319评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,706评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,370评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,664评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,326评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,730评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2赞 335

推荐阅读更多精彩内容

  • 跨域问题
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    他在发呆阅读 820评论 0赞 0
  • 跨域问题汇总
    跨域问题的场景和解决方案多种多样，只要是做前端开发，总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。...
    花开_陈凤娟阅读 730评论 0赞 0
  • 前端跨域问题
    一：同源策略 1.what's this 所谓同源是指，域名，协议，端口相同。当浏览器运行一个JS脚本时会进行同源...
    吃茶叶蛋阅读 364评论 1赞 0
  • 跨域问题6种解决方式
    为什么会有跨越问题？因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。 下面介绍5种解决跨域的...
    sdcV阅读 2,681评论 2赞 3
  • 跨域问题
    1. 什么是跨域? 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    稍纵即逝_e5e9阅读 196评论 0赞 0