JavaScript를 통해 페이지의 HTTP 응답 헤더에 어떻게 액세스합니까?

이 질문 과 관련하여 두 개의 특정 HTTP 헤더에 액세스하도록 요청되었습니다.

관련 :
JavaScript를 통해 HTTP 요청 헤더 필드에 어떻게 액세스합니까?

현재 헤더를 읽을 수 없습니다. 동일한 URL에 다른 요청을하고 헤더를 읽을 수는 있지만 헤더가 현재와 정확히 동일하다는 보장은 없습니다.

get요청 을 수행하여 모든 HTTP 헤더를 가져 오려면 다음 JavaScript 코드를 사용하십시오 .

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);

불행히도 초기 페이지 요청에 대한 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 요청 헤더를 자바 스크립트에 사용할 수있게하려면 서버에서 해당 헤더를 반복하여 마크 업에서 숨겨진 값으로 다시 보낼 수 있습니다. 이런 식으로 헤더 값을 보내는 것은 이상적이지 않지만 필요한 특정 값에 대해 확실히 할 수 있습니다. 이 솔루션은 논란의 여지가 있지만 비효율적이지만 필요한 경우 작업을 수행합니다.

를 사용 XmlHttpRequest하여 현재 페이지를 가져온 다음 응답의 http 헤더를 검사 할 수 있습니다.

가장 좋은 경우는 HEAD요청을 한 다음 헤더를 검사하는 것입니다.

이를 수행하는 몇 가지 예는 http://www.jibbering.com/2002/4/httprequest.html 을 참조하십시오.

그냥 내 2 센트.

서비스 근로자와의 솔루션

서비스 작업자는 헤더를 포함한 네트워크 정보에 액세스 할 수 있습니다. 좋은 부분은 XMLHttpRequest뿐만 아니라 모든 종류의 요청에서 작동한다는 것입니다.

작동 방식 :

1. 웹 사이트에 서비스 담당자를 추가하십시오.
2. 전송되는 모든 요청을 확인하십시오.
3. 서비스 워커 fetch에게 respondWith기능을 사용 하여 요청하십시오 .
4. 응답이 도착하면 헤더를 읽으십시오.
5. 서비스 워커의 헤더를 postMessage함수 가있는 페이지로 보냅니다 .

작업 예 :

서비스 근로자는 이해하기가 다소 복잡하므로이 모든 작업을 수행하는 작은 라이브러리를 만들었습니다. : 그것은 github에 볼 수 있습니다 https://github.com/gmetais/sw-get-headers .

한계 :

• 웹 사이트는 HTTPS 에 있어야합니다
• 브라우저는 Service Workers API 를 지원해야합니다.
• XMLHttpRequest에서와 마찬가지로 동일한 도메인 / 크로스 도메인 정책이 적용됩니다.

사전으로 액세스 할 수있는 객체로 모든 HTTP 헤더를 구문 분석하는 방법을 찾고있는 사람들을 위해 headers["content-type"]함수를 만들었습니다 parseHttpHeaders.

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"]

헤더 정보를 JavaScript로 보내는 다른 방법은 쿠키를 사용하는 것입니다. 서버는 요청 헤더에서 필요한 모든 데이터를 추출하여 Set-Cookie응답 헤더 내로 다시 보낼 수 있으며 쿠키는 JavaScript로 읽을 수 있습니다. 그러나 keparo가 말했듯이 모든 헤더가 아닌 하나 또는 두 개의 헤더에 대해서만이 작업을 수행하는 것이 가장 좋습니다.

요청 헤더 에 대해 이야기하고 있다면 XmlHttpRequests를 수행 할 때 자신의 헤더를 만들 수 있습니다.

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

http 헤더에 액세스 할 수 없지만 제공되는 정보 중 일부는 DOM에서 사용할 수 있습니다. 예를 들어 http 참조 자 (sic)를 보려면 document.referrer를 사용하십시오. 다른 http 헤더에는 이와 같은 다른 것들이있을 수 있습니다. "http referer javascript"와 같이 원하는 것을 인터넷 검색해보십시오.

나는 이것이 명백해야한다는 것을 알고 있지만, 내가 정말로 원했던 모든 것이 참조 자 일 때 유용한 "http headers javascript"와 같은 것을 계속 찾고 유용한 결과를 얻지 못했습니다. 더 구체적인 쿼리를 만들 수 있다는 것을 어떻게 알지 못했는지 모르겠습니다.

많은 사람들처럼 나는 진정한 대답없이 그물을 파고 왔습니다 :(

그럼에도 불구하고 다른 사람들을 도울 수있는 우회를 찾았습니다. 내 경우에는 웹 서버를 완전히 제어합니다. 사실 그것은 내 응용 프로그램의 일부입니다 (최종 참조 참조). http 응답에 스크립트를 쉽게 추가 할 수 있습니다. 모든 HTML 페이지 내에 작은 스크립트를 삽입하도록 httpd 서버를 수정했습니다. 헤더 생성 직후 추가 'js 스크립트'행만 밀어 내 브라우저에서 내 문서의 기존 변수를 설정합니다 [위치 선택]. 다른 옵션도 가능합니다. 내 서버가 nodejs로 작성되었지만 동일한 기술을 PHP 또는 다른 시스템에서 사용할 수 있다는 것은 의심의 여지가 없습니다.

  case ".html":
    response.setHeader("Content-Type", "text/html");
    response.write ("<script>location['GPSD_HTTP_AJAX']=true</script>")
    // process the real contend of my page

이제 내 서버에서로드 된 모든 HTML 페이지는 수신시 브라우저 에서이 스크립트를 실행합니다. 변수가 존재하는지 여부를 JavaScript에서 쉽게 확인할 수 있습니다. 유스 케이스에서 CORS 문제를 피하기 위해 JSON 또는 JSON-P 프로파일을 사용 해야하는지 여부를 알아야하지만 동일한 기술을 다른 목적으로 사용할 수 있습니다 (예 : 개발 / 제작 서버 중에서 선택, 서버에서 REST / API 가져 오기) 키 등 ....]

브라우저에서 내 예제와 같이 JavaScript에서 직접 변수를 확인하면 Json / JQuery 프로파일을 선택하는 데 사용됩니다.

 // Select direct Ajax/Json profile if using GpsdTracking/HttpAjax server otherwise use JsonP
  var corsbypass = true;  
  if (location['GPSD_HTTP_AJAX']) corsbypass = false;

  if (corsbypass) { // Json & html served from two different web servers
    var gpsdApi = "http://localhost:4080/geojson.rest?jsoncallback=?";
  } else { // Json & html served from same web server [no ?jsoncallback=]
    var gpsdApi = "geojson.rest?";
  }
  var gpsdRqt = 
      {key   :123456789 // user authentication key
      ,cmd   :'list'    // rest command
      ,group :'all'     // group to retreive
      ,round : true     // ask server to round numbers
   };
   $.getJSON(gpsdApi,gpsdRqt, DevListCB);

내 코드를 확인하려는 사람은 https://www.npmjs.org/package/gpsdtracking

mootools를 사용하면 this.xhr.getAllResponseHeaders ()를 사용할 수 있습니다

방금 테스트 한 결과 Chrome 버전 28.0.1500.95를 사용하여 작동합니다.

파일을 다운로드하고 파일 이름을 읽어야했습니다. 파일 이름이 헤더에 있으므로 다음을 수행했습니다.

var xhr = new XMLHttpRequest(); 
xhr.open('POST', url, true); 
xhr.responseType = "blob";
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4) {
        success(xhr.response); // the function to proccess the response

        console.log("++++++ reading headers ++++++++");
        var headers = xhr.getAllResponseHeaders();
        console.log(headers);
        console.log("++++++ reading headers end ++++++++");

    }
};

산출:

Date: Fri, 16 Aug 2013 16:21:33 GMT
Content-Disposition: attachment;filename=testFileName.doc
Content-Length: 20
Server: Apache-Coyote/1.1
Content-Type: application/octet-stream

이것은 모든 응답 헤더를 얻는 스크립트입니다.

var url = "< URL >";

var req = new XMLHttpRequest();
req.open('HEAD', url, false);
req.send(null);
var headers = req.getAllResponseHeaders();

//Show alert with response headers.
alert(headers);

결과적으로 응답 헤더가 있습니다.

이것은 Hurl.it를 사용한 비교 테스트입니다.

더 편리한 객체로 헤더를 얻으려면 ( Raja 's answer 개선 ) :

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
headers = headers.split(/\n|\r|\r\n/g).reduce(function(a, b) {
    if (b.length) {
        var [ key, value ] = b.split(': ');
        a[key] = value;
    }
    return a;
}, {});
console.log(headers);

Allain Lalonde의 연결은 나의 하루를 만들었다. 여기에 간단한 HTML 코드를 추가하십시오.
IE9 + 및 Presto-Opera 12 이후의 모든 합리적인 브라우저에서 작동합니다.

<!DOCTYPE html>
<title>(XHR) Show all response headers</title>

<h1>All Response Headers with XHR</h1>
<script>
 var X= new XMLHttpRequest();
 X.open("HEAD", location);
 X.send();
 X.onload= function() { 
   document.body.appendChild(document.createElement("pre")).textContent= X.getAllResponseHeaders();
 }
</script>

참고 : 두 번째 요청의 헤더가 표시되며 결과는 초기 요청과 다를 수 있습니다.

<!DOCTYPE html>
<title>fetch() all Response Headers</title>

<h1>All Response Headers with fetch()</h1>
<script>
 var x= "";
 if(window.fetch)
    fetch(location, {method:'HEAD'})
    .then(function(r) {
       r.headers.forEach(
          function(Value, Header) { x= x + Header + "\n" + Value + "\n\n"; }
       );
    })
    .then(function() {
       document.body.appendChild(document.createElement("pre")).textContent= x;
    });
 else
   document.write("This does not work in your browser - no support for fetch API");
</script>

이것은 오래된 질문입니다. 확실하지 지원이 더 넓은되었지만, 때 getAllResponseHeaders()와 getResponseHeader()지금은 매우 표준으로 나타납니다 http://www.w3schools.com/xml/dom_http.asp

이미 언급했듯이 서버 측을 제어하면 초기 응답에서 초기 요청 헤더를 클라이언트로 다시 보낼 수 있습니다.

예를 들어 Express에서는 다음이 작동합니다.

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) 그런 다음 템플릿 내에서 헤더를 사용할 수 있으므로 시각적으로 숨길 수 있지만 마크 업에 포함되어 클라이언트 측 자바 스크립트에서 읽을 수 있습니다.

JQuery / JavaScript에서 요청 헤더를 가져 오려면 대답은 단순히 아니요입니다. 다른 솔루션은 aspx 페이지 또는 jsp 페이지를 생성하면 요청 헤더에 쉽게 액세스 할 수 있습니다. aspx 페이지의 모든 요청을 가져 와서 세션 / 쿠키에 넣은 다음 JavaScript 페이지에서 쿠키에 액세스 할 수 있습니다.