AngularJS $ http.get報告XMLHttpRequest失敗

我正試圖學習在AngularJS中使用$ http.get請求來創建我正在編寫的Web應用程序。我有一個本地託管的服務器，它具有我編寫的一些API。當我嘗試運行我的Angular頁面時，我可以在服務器的控制檯中看到GET請求已完成，但瀏覽器中沒有加載。在檢查瀏覽器的控制檯我發現此錯誤消息：

XMLHttpRequest cannot load http://127.0.0.1:8080/api/range/?nmax=5&a_max=100&b_max=200, No 'Access-Control-Allow-Origin' header is print on the requested resource. Origin 'null' is therefore not allowed access.

服務器端我正在運行，將採取一個GET請求以上網址，並返回一個JSON字符串看起來像這樣的Python的CherryPy服務器：

[ 
    { 
     "a": 5.6, 
     "b": 3.2 
    }, 
    { 
     "a": 4.3, 
     "b": 2.6 
    } 
]

這裏是我的角碼，此刻它儘可能簡單：

<!DOCTYPE html> 
<html> 
<head> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 
<body> 

<div ng-app="myApp" ng-controller="Ctrl"> 

<ul> 
    <li ng-repeat="x in peakdata"> 
    {{ x.a + ', ' + x.b }} 
    </li> 
</ul> 

</div> 

<script> 
var myApp = angular.module('myApp', []); 

myApp.controller('Ctrl', function($scope, $http) { 
    $http.get('http://127.0.0.1:1234/api/range/?nmax=5&a_max=100&b_max=200') 
    .then(function(response){ 
     $scope.peakdata = response.data; 
    }, function(err) { 
     throw err; 
    }); 
}); 
</script> 

</body> 
</html>

任何建議，將不勝感激！

謝謝，肖恩。

編輯：原來，我不得不修改我的AngularJS代碼和我的CherryPy腳本。查看我的答案瞭解更多詳情。

來源

2015-08-18 Vielbein

一點點進一步研究後，和擺弄我終於來到了一個解決方案。我需要CORS啓用我的AngularJS應用程序。以下代碼已足夠：

myApp.config(function($httpProvider) { 
    $httpProvider.defaults.useXDomain = true; 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
});

在大多數人的情況下，他們的問題將在那裏結束。但是，由於我正在運行自己的CherryPy服務器，所以我還有一點要做。我必須在我的CherryPy Python腳本中啓用CORS。這些問題/答案，這裏有良好的資源，面對面的人這樣做：

「no 'Access-Control-Allow-Origin' header is present」 error with Cherrypy

cherrypy/jquery CORS trouble

對於任何人想知道什麼「CORS」其實，它的全稱是「跨來源資源共享」。維基百科頁面是一個很好的光讀：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

來源

2015-08-18 12:57:48 Vielbein

我相信這個前面的問題可能有你正在尋找的答案： Origin null is not allowed by Access-Control-Allow-Origin。

它，當你在本地做的事情出現了問題，所以我認爲這是不是你沒有使用正確的角:)

來源

2015-08-18 12:09:39 VesterDe

雖然這個問題沒有回答我的問題，它確實提供了我需要谷歌關鍵詞和術語，我需要的答案，我正在尋找。非常感謝你，我會發佈一個答案，詳細說明我是如何解決我的問題的。 – Vielbein

AngularJS $ http.get報告XMLHttpRequest失敗

回答

相關問題