Javascript 获取远程json文件_Javascript_Jquery_Cors_Getjson

Javascript 获取远程json文件

javascript jquery cors

Javascript 获取远程json文件,javascript,jquery,cors,getjson,Javascript,Jquery,Cors,Getjson,我正在学习JavaScript，现在我陷入了一个我不理解的问题。这个问题与jQuery.get、CORS、jQuery.getJSON和JSONP有关假设我正在编写一个html文件，其中包含一些脚本，可以访问包含JSON内容的URL。html文件位于我的本地文件系统中，如下所示： <!DOCTYPE html> <head> <title>Test</title> <script src = "test.js" charset

我正在学习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>

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

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

无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“null”

通过谷歌搜索，我发现这个错误是由于以下原因造成的：从某个域（我的本地文件系统）到另一个域（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的内容，以及它是如何由以下人员管理的：

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

因此，我做了以下更改：

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

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

未捕获的语法错误：意外标记：

标记SyntaxError的文件名是第1行的泰兰德，其内容如下所示：

<!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>

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

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

getJSON似乎从提供的url下载了一个名为泰兰德的文件，然后下载了它的内容，这些内容是JSON输入，因此不是有效的JavaScript可计算字符串

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

为了获取远程资源，html文件是在我的文件系统中还是在远程服务器中很重要
CORS是否必须启用？如何在脚本上启用它？我必须如何测试远程资源是否支持CORS
如果我使用jQuery.getJSON，那么资源地址是否不是JSON文件很重要
我上次找错的地方是什么？为什么要下载名为泰兰德的文件，然后对其内容进行评估

感谢您的关注

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

那么，添加

“callback=？”

的

jQuery.getJSON

函数如何至少访问远程内容？@PaperBirdMaster您说的是JSONP，这将允许跨源通信，但前提是服务器遵守。是的，请阅读我给你的链接下的文档。@RayNicholus你提供的链接没有问我一些问题（我在这方面完全是新手），例如：如何检查远程服务器是否提供/允许CORS和/或JSONP？我没有提供任何链接。这都是可能的，但只有当远程服务器实现CORS或JSONP时。您还可以代理来自您控制的服务器的请求。如果你想了解更多关于这些概念的信息，那么SO上有大量关于这些主题的信息，或者可以通过搜索引擎访问这些信息。你的处境并不独特。它包含在数百个其他SO线程、博客帖子和关于跨源通信的文章中。我知道，而且我已经检查了许多SO线程，但不幸的是，其中列出的解决方案都不适用于我。您尝试过哪些具体的解决方案？您的问题中缺少了一个关键组件：服务器端代码。同样，如果您不控制服务器，并且服务器没有实现JSONP或CORS，那么除了通过您控制的服务器代理请求之外，您什么也做不了；我曾尝试使用jQuery绕过跨源代码（正如我详细描述的那样），但现在我陷入困境，我不知道下一步该怎么做。您是否尝试过阅读您试图访问的服务的文档，或询问维护它的人员？简而言之，如果简单的XHR请求不起作用，它可能不支持CORS。如果一个简单的JSONP请求不能使用标准回调名称，那么它可能不支持JSONP。因此，您需要通过您控制的服务器代理请求。