Question

我不知道为什么，但我真的没能找到合适的资源，这有助于我理解这里的最佳实践，但是说我有一个应用程序，我想向另一个人发出Ajax请求应用

说app A的域名是：www.example.com，我想向www.someapplication.com提出请求

我可以这样做吗？（在这种情况下是jQuery）

$.ajax({
  url: 'http://www.someapplication.com/items',
  dataType: 'json',
  data: "search=butter",
  success: function(data){
    console.log(data);
  }
});

当我在浏览器中转到地址（http://www.someapplication.com/items?search=butter&format=json）时，它会返回200响应，并且当我上面的JS执行它时，我请求然而的json格式的内容会收到200响应，但没有内容。

这是因为我在someapplication.com上的服务器认为这是一次XSS攻击并拒绝回复吗？

虽然我有一个请求是否应该转到.js文件？我在其他应用程序的设计中已经注意到了这一点，例如：http://www.someapplication.com/search.js ...错误地说我的概念有什么问题，我在这里遗漏了一些关于XSS和Ajax的东西吗？

Answer 1

这确实是由于相同的原产地政策。如果您可以控制远程服务器，则还可以在服务器端添加HTTP Access-Control标头。这样，您基本上可以从服务器端控制是否允许触发XMLHttpRequest的客户端处理响应。任何最近（和体面的）webbrowser都会采取相应的行动。

这是一个以PHP为目标的示例，说明如何相应地设置标头。

header('Access-Control-Allow-Origin: *'); // Everone may process the response.
header('Access-Control-Max-Age: 604800'); // Client may cache this for one week.
header('Access-Control-Allow-Methods: GET, POST'); // Allowed request methods.

关键是Access-Control-Allow-Origin: *。这通知客户端允许来自*（实际上，无处不在）的请求处理响应。如果您将其设置为例如Access-Control-Allow-Origin: http://example.com，那么webbrowser可能只在从提到的域提供初始页面时处理响应。

许多现有的JSON服务也在Google的每个服务下使用它。

另见：

MDC - HTTP Access Control

Answer 2

您要点击的是same origin policy，远程域需要支持JSONP才能工作，否则XmlHttpRequest会阻止（浏览器）查看内容。

一旦设置完毕，在jQuery中你可以通过将dataType option设置为jsonp来触发JSONP行为，如下所示：

$.ajax({
  url: 'http://www.someapplication.com/items',
  dataType: 'jsonp',
  data: "search=butter",
  success: function(data){
    console.log(data);
  }
});

通过向页面添加<script>元素，以完全不同的方式请求内容...所以域必须支持JSONP，否则你会看到一些响应回来时语法错误。

Answer 3

在Nick的回答中，您将看到如何使用JSONP。我想为您添加一条建议如何修改$ .ajax代码，以确定success处理程序中有错误。我在jQuery $.ajax, error handler doesn't work中描述了它。可能很快就会修复更改http://dev.jquery.com/changeset/6432后jQuery中的错误。等到你可以使用的时间

success: function(data, textStatus, xhr){
    if (xhr.readyState === 4 && xhr.status === 0) {
        alert('"error flag\" is true. It means that we have a network error '+
              'or abortion (for example because of Same Origin Policy restrictions)');
    }
},
error: function(xhr, textStatus, errorThrown) {
    if (textStatus !== null) {
        alert("error: " + textStatus);
    } else if (errorThrown !== null) {
        alert("exception: " + errorThrown.message);
    } else {
        alert ("error");
    }
}

在这种情况下，您将在IE和

中看到"exception: access denied"错误

"error flag" is true. It means that we have a network error or abortion
 (for example because of Same Origin Policy restrictions)

在原始策略错误的情况下，其他Web浏览器出现

错误。

顺便说一下，在我的实验中，浏览器返回xhr.status = 0而不是200，如果出现同源策略错误。

Answer 4

虽然跨域XHR尚未在所有浏览器中提供，但您可以使用简单的PHP文件制作网关：

<?php
echo file_get_contents($_GET['url']);
?>

然后你只需使用正确的网址：gateway.php?url=http://www.someapplication.com/items。也许不是理想的解决方案，但它确实有效。

编辑：考虑在您要使用的PHP文件URL（或仅域）中声明，以避免可能滥用网关，例如：

<?php
$urls = array();
$urls[0] = 'http://www.someapplication.com/items';
echo file_get_contents($urls[$_GET['id']]);
?>

有关制作XHR请求的问题

4 个答案:

另见：