2010-04-08 2 views
3

.ajax 호출을 사용하여 jQuery를 사용하여 bit.ly URL 단축 서비스를 호출하려고합니다.jQuery .ajax에서 bit.ly를 호출하면 FF 또는 Chrome이 아닌 IE에서 결과가 반환됩니다.

업데이트 이것이 도메인 간 보안 문제일까요? 나는 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에서 작동하지만 파이어 폭스 (3.5.9)에서 작동하지 않습니다도 크롬에 mysite.com에서 전화를 만들고있어. 두 경우 모두 'json'은 null입니다. 크롬에서

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 

헤더 IE8

에서

헤더

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 

그래서 유일한 명백한 차이가 크롬 보내는 것입니다 "원산지 : 파일 : //"내가 어떻게 아무 생각도 없어 그것을 그만 두십시오.

+0

현실 세계에서는 ** 절대 **해야합니다. 브라우저에서 단축을하면 API 키가 전 세계에 노출됩니다. 이러한 API 키를 사용하면 누구나 사용자를 대신하여 단축 할 수 있습니다. 비밀번호와 마찬가지로 API 키와 OAuth 토큰을 항상 처리해야합니다. 자세한 내용은 [우수 사례] (http://dev.bitly.com/best_practices.html) 문서를 참조하십시오. – SeanOC

답변

1

피들러를 사용하여 요청의 실제 페이로드와 bit.ly 서비스의 응답을 확인하십시오. IE 요청/응답을 Chrome과 비교하여 무엇이 다른지 확인하십시오.

브라우저가 요청하는 방식의 차이로 인해 요청이 Firefox 및 Chrome에서 전송 될 때 서비스에서 사용자에게 오류 메시지를 반환하는 것으로 추정됩니다 (야생). 특히, url 매개 변수를 추가하는 방식이 나에게 조금 의심스러운 것처럼 보입니다.

업데이트 : 실제로 HTTP 헤더가 문제를 밝혀 냈습니다. :-)

Origin header은 요청이 교차 출격 요청 인 웹 사이트를 제안하려고 할 때 사용자 에이전트가 추가합니다. 최근에이 헤더에 대해 분명히 Chrome has added support입니다. 그리고 물론 :

Origin 헤더의 세부 정보는 아직 완료되지 않았습니다. 입니다. 우리는 을 Chrome에서 구현하여 으로 업데이트 할 예정입니다. 모질라와 W3C 및 IETF 커뮤니티로부터 피드백을 기반으로 사양이 발전합니다.

현재 Chrome에서 해당 헤더를 보내지 못하도록 할 수없는 것으로 나타났습니다. Btw는 Origin 헤더가 Firefox 3.6에서 처음 소개 된 것으로 보입니다. 모든 브라우저에서 최신의 가장 뛰어난 브라우저를 실행하고있는 것으로 의심됩니다. :-)

Btw, XMLHttpRequest에는 도메인 간 제한이 있습니다. jQuery.Ajax가 XMLHttpRequest 대신 IE8에서 새로운 XDomainRequest을 사용하지 않는지 궁금합니다.

문제로 돌아 가면 -이 시점에서 모든 유용한 점은 Ajax 전화를 사이트에 보내고 서버에서 bit.ly 호출을하는 것입니다. 최적이 아닙니다. 알고 있습니다 ...

+0

팁 주셔서 감사합니다, 나중에 그들을 시도해 보겠습니다. 흥미롭게도 IE/FF/Chrome에 요청 URL을 붙여 넣으면 유효한 응답을 얻을 수 있습니다. ( –

+0

) 모든 브라우저에서 주소가 (적어도 IE는 하나임) 가정하면 매개 변수의 올바른 URL 인코딩을 수행한다고 가정합니다. 그러나 파이어 폭스와 크롬에서 XMLHttpRequest를 구현하면 호출 코드가이를 수행하고 URL을 전달할 것으로 예상된다면 놀랄 일이 아니다. 이것은 URI RFC (3896 또는 3986 - 항상 정확한 숫자는 잊어 버림), 매개 변수의 URL이 경로의 일부가 아니므로 경로의 중간에 쿼리 매개 변수가 허용되므로 매개 변수의 URL이 경로의 일부가 아니므로 인코딩하지 않아야합니다. –

+0

URLEncode 플러그인을 추가했습니다. 아직 URL이 인코딩되어 있지 않습니다. 아직 해결이 안되어 있습니다. 제 웹 사이트에서 bit.ly를 호출하고 jQuery에서 웹 사이트를 호출하는 것이 더 빠를 수도 있습니다. –

1

이 기능을 사용하는 것은 쉽지 않습니다. JSONP를 사용하는 것이 좋습니다.

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

모든 작업을 수행해야합니다.