一尘不染

通过Angular从Firebase托管获取JSONP文件

angularjs

我正在尝试.json从远程Firebase服务器获取文件。

function fetchData(remoteJsonId){
    var url = "https://myAppName.firebaseapp.com/topics/"+remoteJsonID;
    console.log(url); //This variable expands to the full domain name which is valid and                       returns success both on wget and the browser
    $http.jsonp(url).then(
        function(resp){

        },
        function(err){
            console.log(err.status) // This posts "404" on console.
        }
    );
}

但是,如果我url在浏览器中打开,则会加载json文件。即使我wget url加载了json文件。但是通过角度返回404未找到。

现在,.json远程文件具有以下结构:

[
  { 
    "hello":"Europe"
  },

  {
    "hello":"USA"
  }
]

可以使用$ http.get()而不是$ http.jsonp()来获取上述文件。JSONP无法解析具有上述结构的.json文件。我该如何解决?


阅读 200

收藏
2020-07-04

共1个答案

一尘不染

您需要?callback=JSON_CALLBACK在传递给的URL中指定$http.jsonp

Angular的$http.jsonp文档中

jsonp(url, [config]);
Shortcut method to perform JSONP request.

Parameters
Param   Type    Details
url     string  
Relative or absolute URL specifying the destination of the request.
The name of the callback should be the string JSON_CALLBACK.

最后一行是您所缺少的。

一个简单的示例(使用Firebase数据库,而不是Firebase托管):

var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope, $http) {
  var url = 'https://yourfirebase.firebaseio.com/25564200.json';
  $http.jsonp(url+'?callback=JSON_CALLBACK').then(
    function(resp){
      console.log(resp.data); // your object is in resp.data
    },
    function(err){
        console.error(err.status)
    }
  );  
});

如果您希望看到它正常工作:http :
//jsbin.com/robono/1/watch?js,console

2020-07-04