ajax——CORS跨域調用REST API 的常見問題以及先後端的設置

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;
}

參考：
預檢表請求
Cross-Origin Resource Sharing
Angular經過CORS實現跨域方案 注意這裏的[CORS的分類]一節。