jQuery -如何消除跨域限制

Question

我正在做一个移动端的web应用，jsonp对于跨域请求是很酷的，但是服务器的API不支持回调参数。所以我只能使用json从远程服务器获取数据。

我在jQuery中尝试过json，似乎它不支持跨域请求。我在safari上尝试了原始的ajax请求函数，它在跨域上工作得很好，所以我可以在jQuery中消除跨域json请求的限制吗？(不是jsonp，只有json)，该怎么做呢？

或者，是否有其他简单的ajax库(跨web浏览器)可以对跨域请求执行json。

Answer 1

同源策略

您正在尝试绕过Same Origin Policy。它内置于每个浏览器中，通常您不能或不应该禁用/变通/等。它是站点、用户和用户浏览器之间的一个非常重要的安全契约。

CORS (可能)

CORS允许您的web服务器告诉浏览器/客户端允许访问其他域。这是通过web服务器输出以下HTTP标头来实现的

 Access-Control-Allow-Origin: http://www.example.com

如果你不能控制你的HTTP头，那么你就不能使用CORS。它的实现是特定于语言/框架的。

请注意，您应该检查以确保browser compatibility，因为IE8/9的支持有限。还要注意，这是一个潜在的攻击载体。如果您不负责任地使用响应数据，它允许来自第三方站点的响应执行XSS攻击。

JSONP(possible)

JSONP是一种巧妙的在服务器之间传递和获取数据的方法，它可以动态地向您的页面添加一个script标记，该标记的src属性等于"yoururl.com?<your parameter data>"。这是完成这一壮举的唯一合法方式，无需web代理(见下文)或applet (Flash/Java)。但是，如果您不是请求两端的提供者，那么它确实有其自身的安全风险。请记住，JSONP允许远程服务器在您的上下文中执行代码，您应该是very careful who you give that power to用户。

"Vanilla“AJAX (不可能)

如果您没有使用JSONP来获取数据，那么您很可能正在尝试使用AJAX请求来获取数据。AJAX请求也受同源策略的约束。JavaScript库(例如jQuery、Prototype、Dojo等)不能将此策略作为Ajax请求的基本行为来规避。但是，它们可以支持JSONP (现在记住，不是AJAX)。

使用网络代理的AJAX (可能)

如果您确实想从其他服务器请求数据，则可以转发您的请求。您的主站点的服务器将充当代理。您需要向自己的服务器发出AJAX请求，然后服务器端代码将向另一个域发出请求，然后通过AJAX calls响应将响应发送到您的脚本。

这是一种常见的模式，这里将其详细描述为Web Proxy Pattern和价格友好的Yahoo one here (but remember it's Yahoo specific, just take the general idea)。但是，它依赖于服务器端语言。总体实现是相同的，但是根据您选择的服务器端语言(PHP、Ruby、Python、C等)，执行此操作的代码会有所不同。一些语言已经有了库/模块/等来支持这样的模式。

闪存(可能，非默认)

处于默认状态的闪存不支持跨域请求。可以使用cross-domain policy files在Flash7+中打开它，但强烈建议不要使用它。你的脚本必须与Flash API接口，这样才能发出请求并将数据返回给你的JavaScript。

Java小程序(可能，非默认)

Java也受到同源策略的约束，但在闪存方面的工作与described here on its release类似。

各种其他的“黑客”

还有其他黑客攻击，但它们通常要求您控制两端，或者有一个商定的通信标准。例如“window.name”黑客攻击。我不建议这些方法中的大多数。

其他解决方案

另一个类似的问题已经被问到了。它概述了一些我没有介绍的其他方法：Ways to circumvent the same-origin policy

最佳解决方案

1. CORS -如果您信任第三方
2. 网络代理-如果您不使用

您自己的域上的web代理可以允许您对正在检索的数据进行杀毒，它为您的用户提供了最大程度的保护。然而，如果你做零卫生，它不会比这里列出的任何一种方法更安全。如果您确实实现了某种类型的web代理，请确保它的请求仅限于您希望的站点。否则，你实际上是在创建一个open proxy，如果被发现，它可能会被用户滥用，并给你带来法律上的麻烦。

Answer 2

我也有同样的问题。尝试从服务器获取json到我没有访问权限的地方(=> no JSONP)。

我找到了http://benalman.com/projects/php-simple-proxy/，将php proxy添加到您的服务器，并对此文件执行ajax调用。“任何要传递到远程URL资源的GET参数都必须在此参数中进行urlencoded。”

$.ajax({
   type: 'GET',
   url:'proxy.php?url=http://anyDomain.com?someid=thispage',
   dataType: "json",
   success: function(data){
      // success_fn(data);
   },
   error: function(jqXHR, textStatus, errorThrown) {
      // error_fn(jqXHR, textStatus, errorThrown);
   }
});

proxy.php (来自Ben Alman的文件)在您的域中托管的位置

另一种选择(我发现这是第二好的)：http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

Answer 3

一种相当俗气的方式是我在下面所做的，在个人项目上启用跨站点执行

请注意，这将在接收服务器上完成，而不是在发送服务器上完成

    if ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') === FALSE)
        die('You shouldn\'t be here');

    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type');

如果你想让它更安全一点，你可以这样做

    if ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') === FALSE)
        die('You shouldn\'t be here');

switch($_SERVER['HTTP_ORIGIN']){
case 'domain.com':
case 'whatever.com':
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
        header('Access-Control-Max-Age: 1000');
        header('Access-Control-Allow-Headers: Content-Type');
}

希望这能帮到我，我花了很长时间才弄明白。