2011-08-27 114 views
12

我尝试使用下面的jQuery来获得与Google Currency Calculator一个汇率(假)代码:原产地“URL”没有被允许访问控制允许来源

$.getJSON("http://www.google.com/ig/calculator?hl=en&q=1" + "DOP" + "=?" + "USD", 
     function(data) { 
      $('.currNumber').each(function (index) { 
       $(this).html(parseFloat($(this).html()) * 0.02681); 
            }); 
      }); 

的XMLHttpRequest不能加载http://www.google.com/ig/calculator?hl=en&q=1DOP=?USD。 Access-Control-Allow-Origin不允许Origin'hostURL'。

寻找在现场我发现不同主题的主题,但他们大多是指访问本地文件,并尝试通过使用附加参数启动铬解决这个问题(我还使用镀铬),但这样的不是我的问题,这实际上似乎更多与跨域限制有关。

所以,问题是:我如何使用jQuery从该网址获取费率?

+0

的可能重复(http://stackoverflow.com/questions/1051748/cross-domain-scripting-error) – Joe

回答

17

Ajax请求受浏览器的Same Origin Policy限制。简而言之,这意味着您不能通过与您的脚本运行的页面不在同一个域上的ajax直接与服务器通话。所以,除非您正在为google.com开发页面,否则您不能直接与google.com交谈。

此限制涉及插入脚本标记(通过脚本标记加载的JS文件不受同一个源策略限制),然后使用JSONP回调函数将数据结果传递回主脚本脚本标签。如果您尝试使用的API支持它,那么您可能需要在这里执行此操作。

jQuery将在这里帮助你很多,因为它可以自动将ajax调用转换为通过脚本标记加载的JSONP调用,并且可以在跨域情况下工作。根据jQuery doc for it's ajax function,如果在ajax调用的参数字符串中看到“callback =”,或者您设置了crossDomain选项,它将自动执行此操作。

+10

我不是一个熟练的Web开发人员......这是如何完成的? – PedroC88

+1

请阅读我最近编辑的更详细描述。 jQuery可以为你完成大部分工作,但你必须适当地配置ajax调用。 – jfriend00

+0

我已经尝试过使用'&callback =?',但是这会导致资源被解释为脚本,但是使用MIME类型文本html进行传输。我认为这意味着响应具有MIME类型的text/html而不是text/javascript,但是我无法解决这个问题,因为我无法控制回应......我能吗? – PedroC88

2

编辑
我认为这是明显的问题是什么,但现在看来,这可能不是所以这里去。你看到的这个错误是服务器限制你的域通过ajax请求访问它的资源。这是standard JavaScript security - 您的脚本只能与源于它的域进行通话。由于您的JavaScript未从Google的域加载,因此它不在允许通过ajax访问计算器API的域列表中,这就是您看到此错误消息的原因。

使用jQuery进行跨域请求的选项是outlined here。正如我前面提到的,如果服务器支持它,JSONP将只是一个有效的选项,因为它必须发回适当格式的JSON。


如果您提供指向您所指网页的链接,它可能会有所帮助。

从外观看,虽然这个API不支持JSONP(除非有一个未公开的参数),在这种情况下,它几乎是您跨域ajax请求的唯一选项,因为您不控制服务器并且不能更改access control headers

您可能需要考虑构建一个服务器端资源,以便在不受JavaScript安全模型(如the PHP script here)约束的情况下为您访问此API。

+0

链接到该网页[跨域脚本错误?]?有JSON响应的那个?那就是'http://www.google.com/ig/calculator?hl = zh_CN&q = 1DOP =?USD'我也在为webworks开发这个功能(所以这不会在任何服务器上运行,而是在移动设备上运行) – PedroC88

+0

@ PedroC88是否有关于API的文档?你说你已经找到关于这个主题的各种话题;哪里? –

+0

关于浏览器错误的各种话题,实际上不是API,而是API,我还没有找到小队。 – PedroC88

2

从这个链接看来 - http://api.jquery.com/jQuery.ajax/ - 之前由jfriend00提供 - 解释了一个参数,您可以在JQuery ajax请求中包含一个名为“crossDomain”的参数,该参数是一个布尔值。

跨域(默认为false同域请求,真正的跨域请求) 类型:Boolean 如果要强制跨域请求(如JSONP)在同一个域,设置跨域的价值为真。这允许,例如,服务器端重定向到另一个域。 (版本增加:1.5)

因此设置它为true应该解决(?)这个问题。我不是专家,但是我在不断遇到这个问题后尝试了它,似乎解决了这个问题。

实施例:信息的

$.ajax({ //my ajax request 
     url: "_URL_I_AM_MAKING_REQUEST_TO_", 
     type: "GET", 
     cache: false, 
     dataType: "json", 
     **crossDomain: true,** 
     data: { _mydata_ 
     success : function(response){} 
}); 
+1

这不是财产是什么。如果您阅读jQuery文档中的内容,那么它'如果您希望强制跨域请求(例如JSONP)在同一个域上,请将crossDomain的值设置为true。'它表示它将使相同的域请求看起来像跨域域请求。 – Ian

1

次要附加点。

我得到这个问题,因为我得到这个错误试图张贴到我自己的服务器。

解决方案:确保hostname匹配ajax调用。

〔实施例:

//This failed 

$.post("http://domain.com/index.php/count/", 

//This succeeded (the page this was called from was www.domain.com/.....) 

$.post("http://www.domain.com/index.php/count/", 
相关问题