如何使用 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 的示例，它有效。

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

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

有什么建议吗？

Answer 1

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

错误是浏览器试图将您的 JSON 响应解析为 Javascript。您的小提琴请求不会发生这种情况，因为 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 以了解克服跨域错误的可能方法。