使用javascript调用外部网页(跨域)

时间:2012-08-17 00:21:02

标签: javascript jquery ajax

我正在尝试使用this question中的网络服务验证Feed。

但是浏览器不允许我向另一台服务器发送ajax GET请求。并且该Web服务中的每个请求都有一秒限制,因此我无法镜像来自我的服务器的请求。

这是我目前的jQuery代码:

var reqUrl = "http://validator.w3.org/feed/check.cgi?url=" + encodeURIComponent(theUrl);
$.get(reqUrl, function(data) {
    // do something
});

没有其他办法吗?

4 个答案:

答案 0 :(得分:2)

我搜索了谷歌并找到了this。第三个答案说:

  

在计算中,相同的源策略是许多浏览器端编程语言(如JavaScript)的重要安全概念。该策略允许在源自同一站点的页面上运行的脚本访问彼此的方法和属性,没有任何特定限制,但阻止访问不同站点上的页面中的大多数方法和属性。(source)

你最好看到this问题的答案。

我认为您无法使用JSONP,因为您无法访问W3C脚本。

更新(解释)

我与之相关的问题还有另一种方法可以向您解释。如果您将Access-Control-Allow-Origin标题设置为*,因为答案说您可以将请求发送到其他域。要在MVC应用程序中轻松使用它,您可以看到this解决方案。 祝你好运

Update2

只允许http://validator.w3.org/您应该将Access-Control-Allow-Origin设置为http://validator.w3.org/

有关详细信息,请回答here

答案 1 :(得分:2)

除非您使用JSONP,否则Ajax调用在不同域中无效。 JQuery-ajax-cross-domain是一个类似的问题,可能会给你一些见解。另外正如Luis在评论中所指出的那样,JSONP也必须在您从中获取数据的域上实现。

以下是jquery ajax()的示例,但您可能需要查看$.getJSON()

$.ajax({
    url: 'http://yourUrl?callback=?',
    dataType: 'jsonp',
    success: processJSON
});

另一个选项是CORS(跨域资源共享),但是,这需要另一个服务器启用CORS,在这种情况下很可能不会发生。

答案 2 :(得分:1)

如上所述,您可以使用JSONP,但端点也必须实现它,并且仅在您从呼叫请求json数据时使用它。看起来你正在检索html。

您还可以在域中实现一个简单的代理,该代理从外部位置提取数据并将其提供给ajax调用。您可以使用例如CURL在PHP中开发一个简单的代理。

确保您了解此安全性的含义,例如确保您保护代理仅调用该外部网址(白名单)。

更新:我刚注意到您无法使用代理解决方案。在按照您提供的链接后,我发现CORS,我没有事件知道。因此,当您在域中提供页面时,您可以设置一些标题,这些页面将指示浏览器可以完成对某些域的请求。

检查此页面以了解如何实施它:

http://enable-cors.org/

我已经读过你可能需要调整一下才能使用IE,但似乎所有浏览器现在都在实现它。

答案 3 :(得分:0)

我知道这是一个老问题,但我自己也一直试图向validator.w3.org创建AJAX请求,遇到完全相同的问题,偶然发现了这个问题。

然而,我确实找到了解决方案;

正如人们已经说过的,这里的主要问题是服务器必须发出有效的CORS头,即

Access-Control-Allow-Origin:*

我使用Fiddler检查来自validator.w3.org的响应标头,果然,标头没有设置。但是,他们还有另一个工具,可以在validator.w3.org/nu /.

上完成

以下是一个示例:http://codepen.io/DDN-Shep/pen/ogdGgO/

$('form').on('submit', function(e) {
  e.preventDefault();

  var data = new FormData(this);

  $.ajax({
    url: 'http://validator.w3.org/nu/', // Trailing '/' is important or you get a 301 HTTP response status code
    type: 'POST',
    data: data,
    processData: false, // Required for jQuery & FormData
    contentType: false, // Set by FormData, required by the server
    success: function(data, status, xhr) { /* TODO */ },
    error: function(xhr, status, error) { /* TODO */ },
    complete: function(xhr, status) { /* TODO */ }
  });
});

如果您不确定服务器是否允许CORS,您可以使用这个非常有用的在线工具;

test-cors.org = http://client.cors-api.appspot.com/client