如何使用AngularJs从不同的域请求json

Question

我正在尝试从http://xinruima.me/game/themes.json

加载json文件跨域

我试图在AngularJs中为ES6写这个：

  getThemesOptions() {
    const url = `http://xinruima.me/game/themes.json`;
    return this.$http.jsonp(url)
      .success(function(data){
          console.log(data);
      });
  }

它给我错误：

然后我在网上找到了这个：http://jsfiddle.net/subhaze/a4Rc2/114/ 这是使用我写的相同语法调用公共api的一个例子，它的工作原理。

但是当我将网址更改为我的网址时，它会显示上面显示的错误：

我测试了我的json文件，它是有效的。

有什么建议吗？

Answer 1

问题是http://xinruima.me/game/themes.json网址不是JSONP响应，而是常规JSON。

错误是浏览器尝试将JSON响应解析为Javascript。由于网址http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK是有效的JSONP响应，因此您的小提琴请求不会发生这种情况。

您可以使用$http.get代替$http.jsonp

getThemesOptions() {
    const url = `http://xinruima.me/game/themes.json`;
    return this.$http.get(url)
      .success(function(data){
          console.log(data);
      });
  }

但是http://xinruima.me/game/themes.json的请求不允许跨域请求，因此您仍然会遇到错误。例如，在Chrome上，您可以disable the cross-domain security policy但这在开发过程中会很好，如果您无法控制xinruima.me上的服务器，则无法克服此安全限制。< / p>

编辑：

由于JSONP似乎不是一个选项，您可以查看this SO question以了解克服跨域错误的可能方法。