3

我正在尝试使用带有 .ajax 调用的 jQuery 调用 bit.ly URL 缩短服务。

更新我想知道这是否是一个跨域安全问题？我正在拨打mysite.com至bit.ly

<html><head>
<script type="text/javascript" src="http://www.twipler.com/settings/scripts/jquery.1.4.min.js"></script>
<script type="text/javascript">
jQuery.fn.shorten = function(url) 
{ 
  var resultUrl = url;

  $.ajax(
  {
     url: "http://api.bit.ly/shorten?version=2.0.1&login=twipler&apiKey=R_4e618e42fadbb802cf95c6c2dbab3763&longUrl=" + url,
     async: false,
     dataType: 'json',
     data: "",
     type: "GET",
     success: 
     function (json) {  resultUrl = json.results[url].shortUrl; } 
     });

   return resultUrl;
} ;
</script></head><body>
<a href="#" 
      onclick="alert($().shorten('http://amiconnectedtotheinternet.com'));">
      Shorten</a>   </body>    </html>

这适用于 IE8，但不适用于 FireFox (3.5.9) 和 Chrome。在这两种情况下，“json”都是空的。

IE8 中的标头

GET http://api.bit.ly/shorten?ver..[SNIP]..dtotheinternet.com HTTP/1.1
Accept: application/json, text/javascript, */*
Accept-Language: en-US
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0;
      SLCC2; .NET CLR 2.0.50727; Media Center PC 6.0; InfoPath.2; 
     .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Host: api.bit.ly
Connection: Keep-Alive

Chrome 中的标题

GET http://api.bit.ly/shorten?versio..[SNIP]..nectedtotheinternet.com HTTP/1.1
Host: api.bit.ly
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 
    (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5
Origin: file://
Accept: application/json, text/javascript, */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

所以唯一明显的区别是Chrome正在发送“Origin：file://”，我不知道如何阻止它这样做。

4

2 回答 2

1

使用 Fiddler 验证请求的实际负载和来自 bit.ly 服务的响应。将 IE 请求/响应与 Chrome 进行比较，以确定有什么不同。

我的（疯狂的）猜测是，由于浏览器发出请求的方式不同，当 Firefox 和 Chrome 发送请求时，服务会向您返回错误消息。特别是，您附加 url 参数的方式对我来说似乎有点可疑，我会对其进行 url 编码以防万一。

更新：所以确实 HTTP 标头已经揭示了问题。:-)

当用户代理想要向网站建议请求是跨域请求时，会添加Origin 标头。显然Chrome 最近增加了对这个标头的支持。而且当然：

Origin 标头的详细信息仍在最终确定中。随着规范的发展，我们将根据 Mozilla 以及 W3C 和 IETF 社区的反馈更新 Google Chrome 中的实现。

事实证明，您目前无法阻止 Chrome 发送该标头。顺便说一句，似乎Origin标头是由 Firefox 3.6 首次引入的，我怀疑您是那些运行所有最新最好的浏览器的人之一。:-)

顺便说一句，XMLHttpRequest确实有跨域限制。所以，我想知道 jQuery.Ajax 是否没有XDomainRequest在 IE8 上使用 new 而不是XMLHttpRequest.

但回到您的问题 - 在这一点上，一切都指向唯一可用的解决方案是对您的站点进行 Ajax 调用并从您的服务器进行 bit.ly 调用。不是最理想的，我知道...

于 2010-04-08T16:12:17.457 回答
1

让它工作的快速而懒惰的方法是使用 JSONP。

IE

$.ajax(
{
     url: Request,
     async: false,
     dataType: 'jsonp',
     data: "",
     type: "GET",
     success: 
     function (json) {  console.log(json.data.url); } 
});

应该在一切工作。

于 2010-07-14T12:54:23.347 回答