jQuery .ajax 调用 bit.ly 在 IE 中返回结果，但在 FF 或 Chrome 中不返回结果
我正在尝试使用 jQuery 和 .ajax 调用来调用 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://”，但我不知道如何阻止它这样做。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 Fiddler 验证请求的实际负载和 bit.ly 服务的响应。将 IE 请求/响应与 Chrome 请求/响应进行比较，以找出不同之处。
我（疯狂）的猜测是，当 Firefox 和 Chrome 发送请求时，由于浏览器发出请求的方式不同，该服务会返回一条错误消息。特别是，您附加 url 参数的方式对我来说似乎有点可疑，我会对它进行 url 编码，以防万一。更新： 所以 HTTP 标头确实揭示了问题。 :-)
当用户代理想要建议时，会添加 Origin header网站认为该请求是跨域请求。显然 Chrome 添加了支持最近这个标题。当然：
您目前可能无法采取任何措施来阻止 Chrome 发送该标头。顺便说一句，
Origin标头似乎是 Firefox 3.6 首次引入的，我怀疑您是运行所有最新、最好的浏览器的人之一。 :-)顺便说一句，
XMLHttpRequest确实有跨域限制。所以，我想知道 jQuery.Ajax 是否没有使用新的 IE8 上的XDomainRequest而不是XMLHttpRequest。但回到您的问题 - 此时一切都表明唯一可用的解决方案是对您的站点进行 Ajax 调用并从您的服务器进行 bit.ly 调用。不是最佳的，我知道...
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:
It might turn out that you can't currently do anything to prevent Chrome from sending that header. Btw, seems that the
Originheader 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,
XMLHttpRequestdoes have cross-domain restrictions. So, I wonder if jQuery.Ajax is not using the newXDomainRequeston IE8 instead of theXMLHttpRequest.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...
让它工作的快速而懒惰的方法是使用 JSONP。
即
应该适用于一切。
The quick and lazy way to get this to work is to use JSONP.
i.e.
Should work in everything.