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這一項，Google得知需要在伺服器指定哪些網域名稱可以訪問後端介面，設定之：

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: true13     },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的分類]一節。

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