前端跨域問題

// www.domain.com/a.html
document.domain = 'domain.com';
var ifr = document.createElement('iframe');
ifr.src ='http://www.domain.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){ 
var doc = ifr.contentDocument || ifr.contentWindow.document;
ifr.onload = null;
};

// www.domain.com/b.html
document.domain = 'domain.com';

window.name = "My window's name";
setTimeout(function(){
window.location.href = "http://example.cn/";
},1000)

var proxy = function(url, callback) {
var state = 0;
var iframe = document.createElement('iframe');

// 載入跨域頁面
iframe.src = url;

// onload事件會觸發2次，第1次載入跨域頁，並留存資料於window.name
iframe.onload = function() {
if (state === 1) {
// 第2次onload(同域proxy頁)成功後，讀取同域window.name中資料
callback(iframe.contentWindow.name);
destoryFrame();

} else if (state === 0) {
// 第1次onload(跨域頁)成功後，切換到同域代理頁面
iframe.contentWindow.location = 'http://www.aaa.com/proxy.html';
state = 1;
}
};

document.body.appendChild(iframe);

// 獲取資料以後銷燬這個iframe，釋放記憶體；這也保證了安全（不被其他域frame js訪問）
function destoryFrame() {
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
}
};

// 請求跨域b頁面資料
proxy('http://www.bbb.com/b.html', function(data){
alert(data);
});

/*
 * B頁面, 傳送訊息<http://www.bbb.com>
 */
 
 window.onload = function() {
window.parent.postMessage(JSON.stringify({ 
method: method1, 
args: ['args'],
}), 'http://aaa.com');
 };

/*
 * A頁面, 接收訊息<http://www.aaa.com>
 */
 var supportMethodList = {
method1: function () {
//...
}
...
 };
 
 window.addEventListener('message', function (e) {
// 確保訊息為信任來源
if (e.origin ！== http://aaa.com)) {
return;
}
 
var message = {
method: null,
args: []
};
 
try {
// 僅使用 JSON 字串，以支援 IE8/9
message = JSON.parse(e.data);
} catch (e) {}

if (!supportMethodList[message.method]) {
return;
}
supportMethodList[message.method].apply(context,message.args);
}, false);

// 客戶端
 <script>
var script = document.createElement('script');
script.type = 'text/javascript';

// 傳參並指定回撥執行函式為onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回撥執行函式
function onBack(res) {
alert(JSON.stringify(res));
}
 </script>
 
 // 服務端 返回
 onBack({"status": true, "user": "admin"})

var invocation = new XMLHttpRequest();
// 注意 此處url是絕對路徑
var url = 'http://bar.other/resources/public-data/';

function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.onreadystatechange = handler;
invocation.send(); 
}
}

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '{C}{C}{C}{C}{C}{C}{C}{C}{C}{C}Arun';
function callOtherDomain(){
if(invocation){
invocation.open('POST', url, true);
invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.onreadystatechange = handler;
invocation.send(body); 
}
}

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER

Access-Control-Allow-Origin: http://foo.example //表明伺服器允許http://foo.example的請求
Access-Control-Allow-Methods: POST, GET, OPTIONS //表明伺服器可以接受POST, GET和 OPTIONS的請求方法
Access-Control-Allow-Headers: X-PINGOTHER //傳遞一個可接受的自定義請求頭列表。伺服器也需要設定一個與瀏覽器對應。否則會報 Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response 的錯誤
Access-Control-Max-Age: 1728000 //告訴瀏覽器，本次“預請求”的響應結果有效時間是多久。在上面的例子裡，1728000秒代表著20天內，瀏覽器在處理針對該伺服器的跨站請求，都可以無需再發送“預請求”，只需根據本次結果進行判斷處理。

// http://foo.example站點的指令碼向http://bar.other站點發送一個GET請求，並設定了一個Cookies值。指令碼程式碼如下：
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
function callOtherDomain(){
if(invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true;
invocation.onreadystatechange = handler;
invocation.send(); 
}
}

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Credentials: true
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT