可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am trying to call to the bit.ly URL shortening service using jQuery with an .ajax call.

update I wondering if this is a cross-domain security issue? I'm making a call from mysite.com to 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>

This works in IE8 but does not work in FireFox (3.5.9) nor in Chrome. In both cases 'json' is null.

Headers in 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

Headers in 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

So the only obvious difference is that Chrome is sending "Origin: file://" and I've no idea how to stop it doing that.

回答1:

Use Fiddler to verify the actual payload of the request and the response from the bit.ly service. Compare the IE request/response with the Chrome one to identify what's different.

My (wild) guess would be that the service is returning you an error message when the request is sent by Firefox and Chrome due to differences in how the browsers make the request. In particular, the way you append the url parameter seems a bit suspicious to me, and I'd url encode it just in case.

Update: So indeed the HTTP headers have revealed the problem. :-)

The Origin header is added by an user agent when it wants to suggest the website that the request is cross-origin request. Apparently Chrome has added support for this header recently. And of course:

The details of the Origin header are still being finalized. We will update the implementation in Google Chrome as the specification evolves based on feedback from Mozilla and from the W3C and IETF communities at large.

It might turn out that you can't currently do anything to prevent Chrome from sending that header. Btw, seems that the Origin header was first introduced by Firefox 3.6 and I suspect you are one of those people that run all the latest and greatest of all browsers. :-)

Btw, XMLHttpRequest does have cross-domain restrictions. So, I wonder if jQuery.Ajax is not using the new XDomainRequest on IE8 instead of the XMLHttpRequest.

But back to your problem - at this point everything points to the only solution available would be to make the Ajax call to your site and make the bit.ly call from your server. Not optimal, I know...

回答2:

The quick and lazy way to get this to work is to use JSONP.

i.e.

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

Should work in everything.