불행히도 초기 페이지 요청에 대한 HTTP 응답 헤더를 제공하는 API는 없습니다. 그게 원래 질문이었습니다. 일부 사람들은 다른 페이지를 발행하지 않고 원래 페이지 요청의 실제 응답 헤더를 얻고 싶어하기 때문에 반복적으로 요청 되었습니다 .

AJAX 요청의 경우 :

HTTP 요청이 AJAX를 통해 이루어진 경우 getAllResponseHeaders()메소드를 사용 하여 응답 헤더를 가져올 수 있습니다. XMLHttpRequest API의 일부입니다. 이것이 어떻게 적용되는지 보려면 fetchSimilarHeaders()아래 기능을 확인하십시오 . 이 문제는 일부 응용 프로그램에서는 신뢰할 수없는 문제에 대한 해결 방법입니다.

myXMLHttpRequest.getAllResponseHeaders();

• API는 XMLHttpRequest에 대한 다음 후보 권장 사항에 지정되었습니다. XMLHttpRequest-W3C 후보 권장 사항 2010 년 8 월 3 일

• 특히, getAllResponseHeaders()메소드는 다음 섹션에서 지정되었습니다. w3.org : XMLHttpRequest: getallresponseheaders()메소드

• MDN 문서도 좋습니다 : developer.mozilla.org :XMLHttpRequest .

원본 페이지 요청의 HTTP 응답 헤더에 대한 정보는 제공하지 않지만 해당 헤더가 무엇인지에 대한 정확한 추측을하는 데 사용될 수 있습니다. 이에 대한 자세한 내용은 다음에 설명합니다.

초기 페이지 요청에서 헤더 값 가져 오기 :

이 질문은 몇 년 전에 처음으로 현재 페이지 의 원래 HTTP 응답 헤더를 얻는 방법 (예 : 자바 스크립트가 실행되는 동일한 페이지) 에 대해 구체적으로 묻습니다 . 이것은 단순히 HTTP 요청에 대한 응답 헤더를 얻는 것과는 다른 질문입니다. 초기 페이지 요청의 경우 자바 스크립트에서 헤더를 쉽게 사용할 수 없습니다. AJAX를 통해 동일한 페이지를 다시 요청하면 필요한 헤더 값이 확실하고 충분히 일관성이 있는지 여부는 특정 응용 프로그램에 따라 다릅니다.

다음은 그 문제를 해결하기위한 몇 가지 제안입니다.

1. 정적 인 리소스에 대한 요청

응답이 대체로 정적이고 헤더가 요청간에 크게 변경되지 않을 것으로 예상되는 경우 현재 사용중인 동일한 페이지에 대해 AJAX 요청을하고 해당 페이지의 일부와 동일한 값이라고 가정 할 수 있습니다 HTTP 응답. 이를 통해 위에서 설명한 멋진 XMLHttpRequest API를 사용하여 필요한 헤더에 액세스 할 수 있습니다.

function fetchSimilarHeaders (callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            //
            // The following headers may often be similar
            // to those of the original page request...
            //
            if (callback && typeof callback === 'function') {
                callback(request.getAllResponseHeaders());
            }
        }
    };

    //
    // Re-request the same page (document.location)
    // We hope to get the same or similar response headers to those which 
    // came with the current page, but we have no guarantee.
    // Since we are only after the headers, a HEAD request may be sufficient.
    //
    request.open('HEAD', document.location, true);
    request.send(null);
}

이러한 접근 방식은 요청이 동일하다는 것을 완전히 보장 할 수 없기 때문에 요청간에 일관된 값에 의존해야하는 경우 문제가 될 수 있습니다. 특정 응용 프로그램과 필요한 값이 한 요청에서 다음 요청으로 변경되지 않는 값인지 알고 있는지 여부에 따라 다릅니다.

2. 추론하기

있습니다 일부 BOM 속성 브라우저가 헤더를보고 결정 (브라우저 개체 모델). 이러한 속성 중 일부는 HTTP 헤더를 직접 반영합니다 (예 : navigator.userAgentHTTP User-Agent헤더 필드 값으로 설정 ). 사용 가능한 특성을 스니핑하여 필요한 것을 찾거나 HTTP 응답에 포함 된 내용을 나타내는 단서를 찾을 수 있습니다.

3. 그들을 뭉개

서버 측을 제어하면 전체 응답을 구성 할 때 원하는 헤더에 액세스 할 수 있습니다. 값은 페이지와 함께 클라이언트에 전달되어 일부 마크 업 또는 인라인 된 JSON 구조로 저장 될 수 있습니다. 모든 HTTP 요청 헤더를 자바 스크립트에 사용할 수있게하려면 서버에서 해당 헤더를 반복하여 마크 업에서 숨겨진 값으로 다시 보낼 수 있습니다. 이런 식으로 헤더 값을 보내는 것은 이상적이지 않지만 필요한 특정 값에 대해 확실히 할 수 있습니다. 이 솔루션은 논란의 여지가 있지만 비효율적이지만 필요한 경우 작업을 수행합니다.

답변

function parseHttpHeaders(httpHeaders) {
    return httpHeaders.split("\n")
     .map(x=>x.split(/: */,2))
     .filter(x=>x[0])
     .reduce((ac, x)=>{ac[x[0]] = x[1];return ac;}, {});
}

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = parseHttpHeaders(req.getAllResponseHeaders());
// Now we can do:  headers["content-type"]

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);