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

Question

我正在尝试跨域加载 json 文件，来自 http://xinruima.me/game/themes.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/这是一个使用我编写的相同语法调用公共(public) api 的示例，它有效。

但是当我将 url 更改为我的 url 时，它会出现如上所示的错误:

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

有什么建议吗？

Answer 1

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

错误是浏览器试图将您的 JSON 响应解析为 Javascript。您的 fiddle 请求不会发生这种情况，因为 url 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 上的服务器，您将无法克服此安全限制。

编辑:

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