使用Cordova/ionic/Angular的本地json文件.在浏览器中工作,但不在设备上？

Question

我正在尝试使用生活在data.json文件中的JSON对象作为我正在研究的快速原型的数据集.它位于一个my_project/www/data/目录中.我有一个Angular服务,使用该文件中的数据$http,并对其进行一些操作,然后在整个应用程序中使用它.

我正在使用Cordova和Ionic.ionic serve在我的电脑上使用时,浏览器中的一切看起来都很完美.但是,当使用ionic view(http://view.ionic.io/)并在我的iPad上打开应用程序时,我看到:

{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""}

作出回应.我认为,如果它是一个相对URL问题,它也不会在浏览器中工作,但事实并非如此.

这是我正在做的事情:

config.xml有这一行:

<access origin="*" subdomains="true"/>

我的服务预先形成了简单的请求:

return $http.get("../data/data.json").then(function (response) {
    return response.data;
});

最后,在我的控制器中,我要求服务预先形成请求:

 myService.goGetData().then(onComplete, onError);

在我的浏览器中,调用onComplete(),在iPad上调用onError().任何指导？

Answer 1

要离开这里,因为我和原问题作者有同样的问题.简单地从$ http.get函数中的json文件路径中删除任何起始斜杠为我解决了这个问题,现在加载json数据在浏览器模拟器和我的Android设备上都有效.无论您的控制器或服务位于何处,$ http调用url的根似乎始终是index.html文件夹.因此,使用相对于该文件夹的路径,它应该工作.比如$ http.get("data/data.json")

Answer 2

在本地开发人员计算机上,当您运行离子服务时,您实际上正在运行Web服务器.因此,像../../data.json这样的路径将起作用,因为它在具有完整文件系统访问权限的Web服务器的上下文中完全有效.

但是,如果您尝试在设备上执行相同的操作,则可能会遇到问题,因为设备具有不允许ajax遍历根目录的安全策略.它不是动态网络服务器,因此无法在树上加载文件.相反,你会使用类似cordova文件插件的东西从文件系统中获取文件内容.如果您愿意,可以使用ngCordova与插件进行交互,减少痛苦.

我99%肯定这是发生了什么,但你可以通过将$ http调用指向托管在公共服务器上的一些虚拟.json数据来测试我的理论,看它是否有效.这是一些虚拟的json数据.