跨域方式具体实现

一．CORS

１．CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

２．两种请求方式

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

３基本流程

• 简单请求: 正常发送Ajax请求＝＞浏览器检测到此请求为跨域请求自动增加一个origin字段=>服务器根据这个值决定是否同意这次请求＝＞浏览器得到回应，根据返回的头信息没有包含Access-Control-Allow-Origin字段判断本次CORS请求是否成功

GET /cors HTTP/1.1
Origin: [http://api.bob.com](http://api.bob.com/)
Host: api.alice.com
Accept-Language: en-USConnection: keep-alive
User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

• 非简单请求：非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
  非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

OPTIONS /cors HTTP/1.1
Origin: [http://api.bob.com](http://api.bob.com/)
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

浏览器发出预检请求=> 服务器回应预检请求==> 服务器同意则会返回一个带Access-Control-Allow-Origin头信息的HTTP回应=> 浏览器判断预检请求是否被允许 =>如果预检请求被通过，以后每次的非简单请求，就都和简单请求一样
参考文章

二．JSONP

JSONP的实现思路
1.前端创建script标记，设置src，添加到head中（可以往body中添加）
2.后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据
3.回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）
范例：

//服务器代码
var http = require('http');  
var urllib = require('url');  
  
var port = 10011;  
var data = {'name': 'jifeng', 'company': 'taobao'};  
  
http.createServer(function(req, res){  
  var params = urllib.parse(req.url, true);  
  console.log(params);  
  if (params.query && params.query.callback) {  
    //console.log(params.query.callback);  
    var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp  
    res.end(str);  
  } else {  
    res.end(JSON.stringify(data));//普通的json  
  }       
}).listen(port, function(){  
  console.log('server is listening on port ' + port);    
})  

    
    
      
      
    
    
    
Click me
    
    
    
  

三．postmanage

HTML5中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。

otherWindow.postMessage(message, targetOrigin);
otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制
a.com/index.html中的代码：

b.com/index.html中的代码：

参考文章