RESTful架構是目前比較流行的一種網際網路軟體架構，在此架構之下的瀏覽器前端和手機端能共用後端介面。

但是涉及到js跨域呼叫介面總是很頭疼，下邊就跟著chrome的報錯資訊一起來解決一下。

假設：前端域名為front.ls-la.me，後端域名為api.ls-la.com。前端需要訪問的介面為http://api.ls-la.com/user/info.json，需要用GET方式訪問。

現在，用Ajax向後端傳送請求，得到第一個錯誤。（cors跨域的寫法參考：http://blog.csdn.net/fdipzone/article/details/46390573）

錯誤1：

XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://api.ls-la.com' is therefore not allowed access.
 

提示響應頭沒有Access-Control-Allow-Origin這一項，谷歌得知需要在伺服器指定哪些域名可以訪問後端介面，設定之：

header('Access-Control-Allow-Origin: http://front.ls-la.me');
// 如果你不怕扣工資可以這麼設：header('Access-Control-Allow-Origin: *');

再次傳送請求，又報錯。

錯誤2：

XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
 

意思是ajax頭資訊中有X-Requested-With這一欄位，後端不允許。那就讓允許吧：

header('Access-Control-Allow-Headers: X-Requested-With');

好了，這下不報錯了，但是仔細分析請求過程，發現瀏覽器向介面地址傳送了兩個請求，第一個是OPTIONS方式，第二個才是GET方式。

這裡的第一個請求叫做“Preflight Table Request(預檢表請求，微軟這麼翻譯的，不知道對不對)”。這個請求是在跨域的時候瀏覽器自行發起的，作用就是先請求一下看看伺服器支不支援當前的訪問。如果不支援，就會報之前所列的錯誤；如果支援，再發送正常的GET請求，返回相應的資料。

但是每個請求之前都要這麼OPTIONS一下，作為典型處女座表示非常不能忍。需要告訴瀏覽器你搞一下是個意思，老這麼搞就沒意思了：

// 告訴瀏覽器我支援這些方法(後端不支援的方法可以從這裡移除，當然你也可以在後邊加上OPTIONS方法。。。)
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE');
// 告訴瀏覽器我已經記得你了，一天之內不要再發送OPTIONS請求了
header('Access-Control-Max-Age: ' . 3600 * 24);

好了，事情至此告一段落。

才怪！

突然有一天測試妹子跑來跟你說網站記不住使用者的狀態，一檢查發現跨域的時候cookie失效了。

錯誤3：

js在傳送跨域請求的時候請求頭裡預設是不帶cookie的，需要讓他帶上：

1 // js
 2 var xhr = new XMLHttpRequest();
 3 xhr.open('GET', 'http://api.ls-la.com/user/info.json');
 4 xhr.withCredentials = true;
 5 xhr.onload = onLoadHandler;
 6 xhr.send();
 7 
 8 // jQuery
 9 $.ajax({
10     url: 'http://api.ls-la.com/user/info.json',
11     xhrFields: {
12         withCredentials: true
13     },
14     crossDomain: true,
15 });
16 
17 // Angular 三選一
18 $http.post(url, {withCredentials: true, ...})
19 $http({withCredentials: true, ...}).post(...)
20 app.config(function ($httpProvider) {
21     $httpProvider.defaults.withCredentials = true;
22 }

總之就是要在xhr裡設定一下withCredentials = true，然後跨域請求就能帶上cookie了。注意這裡的cookie遵循同源策略，也就是後端傳送的cookie也是屬於域名api.ls-la.com的。

傳送一個帶cookie的post請求，依舊報錯：

錯誤4：

XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

跟上邊那個X-Requested-With報錯一樣，頭資訊不允許，後端改下：

header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');

再來，還是報錯：

錯誤5：

XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. Response to preflight request doesn't pass access control check: Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://front.ls-la.me' is therefore not allowed access.

提示很明顯，後端程式碼加一行，允許攜帶cookie訪問：

// 允許前端帶cookie訪問
header('Access-Control-Allow-Credentials: true');

總結

在後端程式載入前執行以下函式，避免OPTIONS請求浪費系統資源和資料庫資源。

function cors_options()
{
    header('Access-Control-Allow-Origin: http://front.ls-la.me');
    header('Access-Control-Allow-Credentials: true');

    if('OPTIONS' != $_SERVER['REQUEST_METHOD']) return;

    header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE');
    header('Access-Control-Max-Age: ' . 3600 * 24);

    exit;
}