Question

我创建了一个包含以下内容的HTML文件foo.html：

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script> 
      $.ajax({url:"http://foo.com/mdata",
        error: function (results) {
          alert("fail");
        },
        success: function (result) {
          alert("sucesses");
        }
      });
    </script>

当我在Web浏览器中加载此HTML文件时，它始终显示一个失败的对话框。

知道为什么会这样吗？
调试此问题的最佳方法是什么？

PS：

假设http://foo.com/mdata是有效的Web服务路径。

编辑＃1

解决方案

类似的代码使用$ .getJson与我完美配合 http://jsfiddle.net/dpant/EK3W8/

我还将内容保存为.html文件，并且从file：//请求到Web服务似乎也有效。

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="images">

</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });</script>

</body>
</html>

看起来大多数浏览器都支持CROS，所以你可以编写一个脚本保存为.html并在浏览器中打开它，它会成功执行Ajax请求* 只要你提出请求的服务器支持它* 。在这种情况下，我的Web服务器（服务）不支持CROS（Apache的默认配置不支持它）。

许多网络服务已启用CROS，例如http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=？因此请求成功通过。

很少有链接：

http://enable-cors.org/

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

Answer 1

它总是失败有两个原因：

您需要一个网络服务器来回复您的请求（200 =成功，404即错误）Linux您可以轻松设置一个，Windows和Mac查看Bitnami
您无法通过AJAX调用其他域名。如果您在www.example.com上运行脚本，则无法请求www.example.net Look at the same origin policy。

Answer 2

实际上，我们正在通过域发送一个AJAX请求，以便它发生。我试过这段代码。在我的机器上它显示成功。

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script> 
    $.support.cors = true;
      $.ajax({url:"http://www.google.co.in/",
        error: function (xhr, ajaxOptions, thrownError) {

            alert("fail");
            alert(xhr.status);
            alert(thrownError);
       },
        success:function(result){
              alert("sucesses");
        }
      });

    </script>

代码在添加行$.support.cors=true时工作正常，它一定适合你。

Answer 3

正如我所知，在内容脚本中，您无法执行任何跨域XHR。您必须在扩展页面（例如“背景”，“弹出窗口”或甚至“选项”）中执行此操作。

有关内容脚本限制的详细信息，请参阅Google Developer's Guide中的Content Scripts页面。

有关xhr限制的更多信息，请参阅XHR page。

jQuery $ .ajax作为本地HTML文件运行，避免SOP（相同的原始策略）

3 个答案: