AngularJS CORS http調用不起作用，但普通的Ajax和jQuery正常工作

Question

我有一個簡單的跨域服務，旨在處理簡單的CORS請求 。 我可以通過普通的xmlHTTP調用或jQuery（$。ajax）來調用它，但是它與AngularJS $ http一起引發Access-Control-Allow-Origin錯誤

 var url = 'http://some-cross-domain-url/some-path'; $http.get(url); //preflight OPTION verb issued by browser and //since server is not expecting it, it failed $.ajax(url, {type: 'GET'}); //working fine as no preflight request sent 

Answer 1

通過Angular $ http調用的CORS請求觸發了預檢 （OPTIONS動詞），但使用普通的Ajax調用或jQuery Ajax，其發送為未預檢的CORS請求，已通過chrome中的調試器網絡標簽確認。

由於該服務旨在處理簡單CORS請求調用，因此我們需要確保Angular也以某種方式准備請求，以便瀏覽器發出簡單CORS請求（ 請參閱MDN上的Simple vs Not so simple CORS request ）。

解決方案：通過引用Access-Control-Request-Headers刪除Angular添加的標題。

沒有任何headers GET請求被視為簡單請求

如果您已配置Angular $ http defaults ，它將在請求中添加這些標頭，這使得它不是那么簡單的 CORS，如下圖所示。

預檢后作為Access-Control-Request-Headers發送的所有自定義HTTP標頭。 一旦服務器允許按照CORS規則進行通信，瀏覽器就會發送實際請求（帶有原始方法和標頭等）

 //remove custom headers by looking at Access-Control-Request-Headers var headers = { 'Authorization': undefined,//undefined tells angular to not to add this header 'pragma': undefined, 'cache-control': undefined, 'if-modified-since': undefined }; $http.get(url, { headers: headers });