对 bit.ly 的 jQuery .ajax 调用在 IE 中返回结果，但在 FF 或 Chrome 中不返回答案

【问题标题】：jQuery .ajax call to bit.ly returns results in IE but not FF or Chrome对 bit.ly 的 jQuery .ajax 调用在 IE 中返回结果，但在 FF 或 Chrome 中不返回
【发布时间】：2010-04-08 15:44:54
【问题描述】：

我正在尝试使用带有 .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://”，我不知道如何阻止它这样做。

【问题讨论】：

请注意，您应该永远在现实世界中这样做。通过在浏览器中进行缩短，您将 API 密钥公开给全世界。使用这些 API 密钥，任何人都可以代表您缩短。您应该始终像对待密码一样对待 API 密钥和 OAuth 令牌。您可以查看我们的best practices 文档了解更多信息。

标签： jquery cross-browser bit.ly

【解决方案1】：

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

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

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

Origin header 由用户代理添加，当它想向网站建议请求是跨域请求时。显然 Chrome has added support 最近用于此标头。当然：

Origin 标头的详细信息是仍在最终确定中。我们会更新谷歌浏览器中的实现为规范的演变基于来自 Mozilla 和 W3C 的反馈和整个 IETF 社区。p>

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

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

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

【讨论】：

感谢您的提示，我稍后会尝试。有趣的是，如果您只是将请求 URL 粘贴到 IE/FF/Chrome 中，您会得到一个有效的响应：(
我会假设所有浏览器中提交的地址（至少是 IE 的地址）都对参数进行了正确的 url 编码。但是，如果 Firefox 和 Chrome 中的 XMLHttpRequest 实现期望调用代码执行此操作并传递他们看到的 URL，我不会感到惊讶。这实际上可能是故意的，根据 URI RFC（3896 或 3986 - 我总是忘记确切的数字），路径中间允许查询参数，因此没有 100% 的方法可以知道参数中的 URL 是否不是路径的一部分，不应编码。
我添加了 URLEncode 插件并对 URL 进行了编码。仍然没有喜悦。我可能会更快地解决问题并从我的网站调用 bit.ly，并从 jQuery 调用我的网站。
您查看 Fiddler 中的实际 HTTP 请求/响应了吗？正如我所说，关于 URL 参数编码的部分是一个疯狂的猜测。您应该尝试调查 IE 和 Firefox 调用之间究竟有什么区别，以找出实际问题。
用标题更新了问题。仍然没有得到任何地方。明天会增加赏金。

【解决方案2】：

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

即

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

应该适用于一切。

【讨论】：