Question

我正在学习JavaScript，到现在为止我遇到了一个我不理解的问题。此问题与jQuery.get，CORS，jQuery.getJSON和JSONP有关。

假设我正在编写一个带有一些脚本的html文件，这些脚本正在访问带有一些JSON内容的URL。 html文件位于我的本地文件系统中，如下所示：

<!DOCTYPE html>

<head>
  <title>Test</title>
  <script src = "test.js"
  charset = "UTF-8"></script>
  <script src = "jquery/jquery-1.9.1.js"
  charset = "UTF-8"></script>
</head>

<body>
  <h1>Test</h1>

  <script type="text/javascript">
    queryAuctionFiles('eu', 'tyrande');
  </script>
</body>

在body脚本标记中调用的函数queryAuctionFiles如下：

// File: test.js
function queryAuctionFiles(realm, server)
{
  var url = 'http://' +
        realm +
        '.battle.net/api/wow/auction/data/' +
        server;

  jQuery.get(url, function(data)
  {
    alert( "Eureka!" );
  });
}

使用我的Chrome浏览器（V 32.0.1700.76 m）打开html时出现以下错误：

XMLHttpRequest无法加载http://eu.battle.net/api/wow/auction/data/tyrande。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点'null'访问。

谷歌搜索我能够了解到这个错误是由于security reasons禁止从某个域（我的本地文件系统）到另一个域（eu.battle.net）的资源获取。

我还读到这个跨域请求可以通过CORS实现，但是如果我没有弄错的话，必须在请愿书的双方启用这个CORS内容;在我的情况下：我的Chrome必须支持CORS，eu.battle.net必须启用它，我怎样才能知道某个域是否支持CORS？

在寻找我的问题的解决方案时，我发现了jQuery.getJSON方法，所以我试了一下，但结果是一样的，下面的代码：

jQuery.getJSON(url, function(data)
{
  alert( "Eureka!" );
});

产生相同的No'Access-Control-Allow-Origin'错误，起初，我认为错误的产生是因为给定的url不是JSON文件，但毫无疑问是跨域错误。当我考虑放弃时，我已经阅读了JSONP及其如何由jQuery管理：

如果网址包含字符串“callback =？” （或类似的，由服务器端API定义），请求被视为JSONP。

所以，我做了以下改变：

jQuery.getJSON(url + '?callback=?', function(data)
{                  //^~~~~~~~~~~~~
  alert( "Eureka!" );
});

之后，我得到了一个不同的错误：

Uncaught SyntaxError：意外的令牌：

并且，在第1行标记SyntaxError的文件名是tyrande，此tyrande file的内容如下所示：

{"files":[{"url":"http://eu.battle.net/auction-data/d5357dc91898b3f78edfd1fbbe8867e8/auctions.json","lastModified":1390475765000}]}

这个内容是我在作为getJSON的第二个参数传递的匿名函数中期待的输入！

似乎getJSON从提供的url下载了一个名为tyrande的文件，然后eval()其内容，这个内容是JSON输入，因此，它不是一个有效的JavaScript可评估字符串。

现在我已经详细解释了我尝试了什么，并且知道了我的目标，请问：

为了获取远程资源，重要的是html文件是在我的文件系统中还是在远程服务器中？
是否必须启用CORS？如何在我的脚本上启用它？如何测试远程资源是否支持CORS？
如果我正在使用jQuery.getJSON，那么资源地址不是JSON文件会很重要吗？
在我上一次改变中，我做错了什么？为什么要下载名为tyrande的文件，然后其内容为eval() uated？

感谢您的关注

Answer 1

这是不可能的。跨域策略不允许您从不同的域中获取文件。

Check this one out

获取远程json文件

1 个答案: