新手學跨域之CORS

• jsonp
• iframe
  ● document.domain
  ● window.name
  ● location.hash
  ● navigator (IE6 bug)
  ● postMessage
• CORS
  ● XMLHttpRequest (modern browser)
  ● XDomainRequest (IE8+)
• 圖像Ping (略)
• flash (略)
• 代理/轉發
  ● http-server
  ● webpack-dev-server
  ● nginx

先後端跨域交互終於迎來了官方的支持，只需在後端設置容許前端請求域，便可輕鬆實現跨域。
CORS適用與IE8+及現代瀏覽器。現代瀏覽器經過XMLHttpRequest，IE經過XDomainRequest實現。
事件句柄（標*的事件XDomainRequest不支持）

onloadstart* 請求觸發
onprogress 讀取及發送數據時觸發
onabort* 請求終止時觸發
onerror 請求失敗時觸發
onload 請求成功時觸發
ontimeout 超時觸發
onloadend* 請求結束時觸發

後端設置Access-Control-Allow-Origin，標識容許請求的來源域好比http://foo.com，*表示容許來自任意域的請求。

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    console.log(xhr.responseText);
}
xhr.onerror = function() {
    console.log('Request Error!');
}
xhr.open('get', 'http://bar.com/xx.php');
xhr.send(null);

XDomainRequest

var xdr = new XDomainRequest();    
xdr.onload = function() {
    console.log(xdr.responseText)
}
xdr.onerror = function() {
    console.log('Request Error!');
}
xdr.open('get', 'http://bar.com/.php');
xdr.send(null);

<?php
header("Access-Control-Allow-Origin:*");
echo 'xxx';
?>

References:

http://www.html5rocks.com/en/...