請求的資源上沒有“ Access-Control-Allow-Origin”標頭-錯誤

Question

我正在嘗試從instagram獲取JSON文件，並且在制作$ http.get時遇到錯誤：

insta.ctrl：

insta.controler 'instaCtrl' ($scope, $http), ->
   $http.get('http://api.instagram.com/publicapi/oembed/?url=http://instagr.am/p/fA9uwTtkSN/')
       .success(data), ->
           #done !
       .error(e), ->
           #nah ! 

我的apache2的conf

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

chrome上的錯誤消息：

XMLHttpRequest cannot load #url_of_intagram_api_here. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

當我在Chrome中禁用互聯網安全功能時，它可以工作。 有任何想法嗎？

Answer 1

顯然，Instagram API沒有實現CORS 。 但是，它們提供了JSONP接口用於數據檢索。 因此，您可以使用jsonp方法：

$http.jsonp('http://api.instagram.com/publicapi/oembed/?url=http://instagr.am/p/fA9uwTtkSN/&callback=JSON_CALLBACK').success(function(data) {
    $scope.data = data;
});

注意您需要發送的callback=JSON_CALLBACK GET參數。

演示： http ： //plnkr.co/edit/OG1sT7A9OM1hWBqCvSmC？p = preview