jQuery와 AJAX 응답 헤더


163

그래서이 jQuery AJAX 호출을 얻었고 응답은 302 리디렉션의 형태로 서버에서 나옵니다. 이 리디렉션을 가져 와서 iframe에로드하고 싶지만 자바 스크립트 경고로 헤더 정보를 보려고하면 firebug가 올바르게 인식하더라도 null이 나타납니다.

도움이된다면 코드는 다음과 같습니다.

$j.ajax({
    type: 'POST',
    url:'url.do',
    data: formData,
    complete: function(resp){
        alert(resp.getAllResponseHeaders());
    }
});

URL을 응답 본문으로 이동하기 위해 서버 측 항목에 실제로 액세스 할 수는 없습니다. 이는 가장 쉬운 솔루션 일 것이므로 헤더 구문 분석에 대한 도움이 환상적입니다.


3
2017 년 이후 에이 질문을 방문하는 경우 기존 답변 대부분을 사용하여 시간을 낭비하지 마십시오. 문제가 OP와 동일하면 다음 두 가지 옵션이 있습니다. 1) post원래 서버 가 될 프록시 서버를 설정하고 대상 데이터를 추출하면 프런트 엔드 JS가이 프록시 서버에 대상 데이터를 요청합니다. 또는 2) CORS를 허용하도록 서버 코드를 변경하십시오.
kmonsoor

답변:


186

이전 버전의 jquery를 사용하는 경우 cballou의 솔루션이 작동합니다. 최신 버전에서는 다음을 시도 할 수도 있습니다.

  $.ajax({
   type: 'POST',
   url:'url.do',
   data: formData,
   success: function(data, textStatus, request){
        alert(request.getResponseHeader('some_header'));
   },
   error: function (request, textStatus, errorThrown) {
        alert(request.getResponseHeader('some_header'));
   }
  });

문서에 따르면 XMLHttpRequest 객체는 jQuery 1.4부터 사용할 수 있습니다.


5
jQuery> = 1.5 부터는 XHR 객체의 상위 집합 인 jqXHR 이라고 합니다.
Johan

136

이것이 CORS 요청 인 경우 디버그 도구 (예 : Chrome-> 요소 검사-> 네트워크)에 모든 헤더가 표시 될 수 있지만 xHR 객체는 간단한 응답 헤더 인 경우을 통해 헤더를 검색합니다 ( xhr.getResponseHeader('Header')) .

  • Content-Type
  • Last-modified
  • Content-Language
  • Cache-Control
  • Expires
  • Pragma

이 세트에 없으면 서버가 리턴 한 Access-Control-Expose-Headers 헤더에 있어야합니다.

해당 사례에 대해 CORS 요청 인 경우 아래 헤더가있는 경우에만 객체를 Location통해 헤더 를 검색 할 수 있습니다 XMLHttpRequest.

Access-Control-Expose-Headers: Location

CORS 요청이 아닌 경우 XMLHttpRequest검색에 문제가 없습니다.


3
@acdcjunior 감사합니다. 헤더 응답에 출력이없는 이유를 찾기 위해 시간을 투자 한 후 도움을 주셔서 감사합니다
daniyel

33
 var geturl;
  geturl = $.ajax({
    type: "GET",
    url: 'http://....',
    success: function () {
      alert("done!"+ geturl.getAllResponseHeaders());
    }
  });

1
나를 위해 작동하지 않습니다. 다른 사이트에 요청하고 있습니까? (아약스를 사용한 사이트 간 요청)
Siwei Shen 申思维

9
나처럼 작동하지 못한 사람들을 위해. jquery가 XHR을 사용하지 않는 도메인 간 액세스를 수행하고 있기 때문일 수 있습니다. api.jquery.com/jQuery.get
h--n

매력처럼 일했다 .. +1
ErShakirAnsari

18

AJAX 및 302 리디렉션에 대한 불행한 사실은 브라우저가 XHR에 헤더를 제공하지 않기 때문에 반환에서 헤더를 가져올 수 없다는 것입니다. 브라우저에 302가 표시되면 리디렉션이 자동으로 적용됩니다. 이 경우 브라우저가 헤더를 얻었으므로 Firebug에 헤더가 표시되지만 브라우저가 헤더를 전달하지 않았기 때문에 ajax에 표시되지 않습니다. 이것이 성공 및 오류 처리기가 호출되지 않는 이유입니다. 완전한 핸들러 만 호출됩니다.

http://www.checkupdown.com/status/E302.html

The 302 response from the Web server should always include an alternative URL to which redirection should occur. If it does, a Web browser will immediately retry the alternative URL. So you never actually see a 302 error in a Web browser

다음은 주제에 대한 일부 스택 오버 플로우 게시물입니다. 일부 게시물은이 문제를 해결하기위한 해킹에 대해 설명합니다.

jQuery Ajax 호출 후 리디렉션 요청을 관리하는 방법

JavaScript에서 302 FOUND 잡기

HTTP 리디렉션 : 301 (영구) vs. 302 (임시)


10

jQuery에서 사용하는 기본 XMLHttpRequest 객체 는 302 상태 코드를 반환하지 않고 항상 자동으로 리디렉션을 따릅니다 . 따라서 jQuery의 AJAX 요청 기능을 사용하여 반환 된 URL을 가져올 수 없습니다. 대신, 양식에 모든 데이터를 넣고 함께 양식을 제출해야하는 target속성 의 값으로 설정 nameiframe이의 속성 :

$('#myIframe').attr('name', 'myIframe');

var form = $('<form method="POST" action="url.do"></form>').attr('target', 'myIframe');
$('<input type="hidden" />').attr({name: 'search', value: 'test'}).appendTo(form);

form.appendTo(document.body);
form.submit();

서버의 url.do페이지는 iframe에로드되지만 302 상태에 도달하면 iframe이 최종 대상으로 리디렉션됩니다.


9

이 시도:

type: "GET",
async: false,
complete: function (XMLHttpRequest, textStatus) {
    var headers = XMLHttpRequest.getAllResponseHeaders();
}

흠. 응답에 너무 감사하지만 여전히 null을 반환합니다. 다른 아이디어가 있습니까?
Shane

이전 버전의 jquery를 사용 중일 수 있습니다.
rovsen

6

JQUERY 3 이상에 대한 2018 업데이트

나는 이것이 오래된 질문이라는 것을 알고 있지만 위의 해결책 중 어느 것도 나를 위해 일하지 않았다. 작동 한 솔루션은 다음과 같습니다.

//I only created this function as I am making many ajax calls with different urls and appending the result to different divs
function makeAjaxCall(requestType, urlTo, resultAreaId){
        var jqxhr = $.ajax({
            type: requestType,
            url: urlTo
        });
        //this section is executed when the server responds with no error 
        jqxhr.done(function(){

        });
        //this section is executed when the server responds with error
        jqxhr.fail(function(){

        })
        //this section is always executed
        jqxhr.always(function(){
            console.log("getting header " + jqxhr.getResponseHeader('testHeader'));
        });
    }

2

PleaseStand +1하고 여기에 다른 해킹이 있습니다.

검색 후 "cross ajax request"가 XHR 객체에서 응답 헤더를 얻을 수 없다는 것을 알았으므로 포기했습니다. 대신 iframe을 사용하십시오.

1. <iframe style="display:none"></iframe>
2. $("iframe").attr("src", "http://the_url_you_want_to_access")
//this is my aim!!!
3. $("iframe").contents().find('#someID').html()  
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.