jQuery .ajax调用bit.ly在IE中返回结果，但不是FF或Chrome [英] jQuery .ajax call to bit.ly returns results in IE but not FF or Chrome
问题描述
mysite.com 拨打电话到 bit.ly < html>< head>
< script type =text / javascriptsrc =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'））;>
缩短< / a> < / body> < / html>
这适用于IE8，但不能在FireFox在这两种情况下，'json'为null。
IE8中的标题
GET http://api.bit.ly/shorten?ver..[SNIP]..dtotheinternet.com HTTP / 1.1
接受：application / json，text / javascript，* / *
接受语言：en-US
接受编码：gzip，deflate
用户代理：Mozilla / 4.0（兼容; 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）
主机：api.bit .ly
Connection：Keep-Alive
Chrome标题
GET http://api.bit.ly/shorten?versio..[SNIP]..nectedtotheinternet.com HTTP / 1.1
主机： api.bit.ly
连接：keep-alive
用户代理：Mozilla / 5.0（Windows; U; Windows NT 6.1; en-US）AppleWebKit / 532.5
）Chrome / 4.1.249.1045 Safari / 532.5
原文：file：//
接受：application / json，text / javascript，* / *
接受编码：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：//，我不知道如何阻止
使用Fiddler验证请求的实际有效负载和bit.ly服务的响应。比较IE请求/响应与Chrome一个，以确定是什么不同。
我的（野）猜测是服务会返回一个错误消息由于浏览器发出请求的方式不同，Firefox和Chrome会发送请求。特别是，你添加url参数的方式似乎对我有点怀疑，我会url编码它，以防万一。
更新：确实，HTTP标头已经揭示了问题。 ： - ）
Origin标题由用户代理在其想要向网站建议请求是跨源请求时添加。显然， Chrome已添加支持这个头最近。当然：
Origin标题的详细信息是
仍在定稿。我们将更新
在Google Chrome中的实现为
规范根据来自Mozilla和W3C
以及IETF社区的反馈提供更新。
这可能会导致您目前无法执行任何操作，阻止Chrome发送该标头。 Btw，似乎 Origin 头最初由Firefox 3.6引入，我怀疑你是那些运行所有最新最好的浏览器的人之一。 ： - ）
Btw， XMLHttpRequest 确实有跨域限制。所以，我不知道jQuery.Ajax是不是使用新的 XDomainRequest 而不是 XMLHttpRequest 。
但回到你的问题 - 在这一点，一切指向唯一的解决方案可能是Ajax调用到您的网站，并从您的服务器的bit.ly调用。不是最优的，我知道...
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.
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...
这篇关于jQuery .ajax调用bit.ly在IE中返回结果，但不是FF或Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
