請求的資源上沒有'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" 

錯誤消息：

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. 

它工作時，我禁用鉻在互聯網安全。 有什麼建議嗎？

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