jQuery $.ajax 作为本地 HTML 文件运行，避免了 SOP(同源策略)

我创建了一个foo.html的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文件时，它总是显示一个失败的对话框。

知道为什么会这样吗？
另外，调试此内容的最佳方法是什么？

附注：

假定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

它总是失败，原因有两个：

您需要一个响应您的请求的网络服务器（200 =成功，404即错误）在Linux上您可以轻松设置一个，在Windows和Mac上查看Bitnami
不能通过 AJAX 调用其他域。如果您在 www.example.com 上运行脚本，则不能要求 www.example.net 查看同源策略。

实际上，

我们正在尝试跨域发送 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代码即可正常工作，它肯定会为您工作。

正如我所发现的，在内容脚本中，你不能做任何跨域XHR。您必须在扩展页面（例如背景，弹出窗口甚至选项）中执行此操作。

要详细了解内容脚本限制，请参阅 Google 开发者指南中有关内容脚本的页面。

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

相关内容

最新更新

热门标签：