jQuery $.ajax 作为本地 HTML 文件运行，避免 SOP（同源策略）答案

【问题标题】：jQuery $.ajax run as a local HTML file avoiding SOP (same origin policy)jQuery $.ajax 作为本地 HTML 文件运行，避免 SOP（同源策略）
【发布时间】：2013-03-14 13:29:17
【问题描述】：

我创建了一个 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>

当我在网络浏览器中加载这个 HTML 文件时，它总是显示一个失败的对话框。

知道为什么会这样吗？
还有什么是最好的调试方法？

PS：

假设http://foo.com/mdata 是一个有效的网络服务路径。

编辑#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

【问题讨论】：

我收到 500 服务器错误...
尝试在你的ajax请求中的url末尾添加/
我更改了网络服务名称。假设它工作正常，是否还有其他原因导致它无法正常工作。
@GreenLeaf：还是没有运气。
您正在尝试执行跨域脚本。请不要。

标签： jquery ajax local-files

【解决方案1】：

它总是失败有两个原因：

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

【讨论】：

我同意。但是没有任何方法可以仅针对开发周期绕过相同的原产地政策。我确实有一个网络服务器设置，但是在我看来，对网络服务器进行的每一次更改都需要太多重复的工作
在大多数情况下，部署到你的开发服务器的过程应该是“1.在你的编辑器中按保存。2.没有步骤2”。
这就是为什么你需要一个本地网络服务器来开发你的东西。完成后，您可以上传到真实服务器。你不能轻易地逃避同源策略，使用 PHP（或 Python，或其他）作为在本地网络服务器上运行的代理。但正如您所见，您仍然需要一个在本地运行的网络服务器。
其实你可以通过 AJAX 调用不同的域，只要你的浏览器和远程服务器都支持CORS。（此外，如果您要获取 JSON，还有一种称为 JSONP 的解决方法。）

【解决方案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 行后代码可以正常工作，它肯定会为您工作。

【讨论】：

本地浏览器和远程服务器都必须支持CORS。 Internet Explorer $.support.cors 设置为true 将无法使其与此类浏览器和服务器一起使用。
@Monhpreet 这对我仍然不起作用。还是会失败。我正在使用 Firefox 和 chrome。

【解决方案3】：

我发现，在内容脚本中，您不能执行任何跨域 XHR。您必须在诸如背景、弹出窗口或什至选项的扩展页面中执行它们。

有关内容脚本限制的更多信息，请参阅 Google 开发者指南中Content Scripts 上的页面。

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

【讨论】：