Невозможно прочитать текущие заголовки. Вы можете сделать еще один запрос к тому же URL-адресу и прочитать его заголовки, но нет гарантии, что заголовки в точности равны текущему.

Используйте следующий код JavaScript, чтобы получить все заголовки HTTP, выполнив get запрос:

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

К сожалению, не существует API, который предоставил бы вам заголовки HTTP-ответа для вашего начального запроса страницы. Это был исходный вопрос, размещенный здесь. Это неоднократно спросил, потому что некоторые люди хотели бы получать фактические заголовки ответа исходного запроса страницы, не отправляя еще один.

Для запросов AJAX:

Если HTTP-запрос выполняется через AJAX, можно получить заголовки ответа с помощью метода getAllResponseHeaders(). Это часть API XMLHttpRequest. Чтобы увидеть, как это можно применить, ознакомьтесь с функцией fetchSimilarHeaders() ниже. Обратите внимание, что это способ решения проблемы, который не будет надежным для некоторых приложений.

myXMLHttpRequest.getAllResponseHeaders();

• API был указан в следующей рекомендации кандидата для XMLHttpRequest: XMLHttpRequest - Рекомендация кандидата 3 W3C Август 2010 г.

• В частности, метод getAllResponseHeaders() был указан в следующем разделе: w3.org: XMLHttpRequest: getallresponseheaders() метод

• Документация MDN тоже хороша: developer.mozilla.org: _7 _ .

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);
}

Используя XmlHttpRequest, вы можете открыть текущую страницу, а затем изучить http-заголовки ответа.

В лучшем случае просто выполните HEAD запрос, а затем изучите заголовки.

Некоторые примеры этого можно найти на странице http://www.jibbering.com/2002/4/httprequest.html

Только мои 2 цента.

Решение с Service Workers

Сервисные работники могут получить доступ к сетевой информации, включая заголовки. Хорошо то, что он работает с любым запросом, а не только с XMLHttpRequest.

Как это работает:

1. Добавьте сервисного работника на свой сайт.
2. Следите за каждым отправляемым запросом.
3. Сделайте запрос работнику службы fetch с помощью функции respondWith.
4. Когда придет ответ, прочтите заголовки.
5. Отправьте заголовки от сервис-воркера на страницу с функцией postMessage.

Рабочий пример:

Сервис-воркеры немного сложны для понимания, поэтому я создал небольшую библиотеку, которая делает все это. Он доступен на github: https://github.com/gmetais/sw-get-headers.

• веб-сайт должен быть на HTTPS
• браузер должен поддерживать Service Workers API
• действуют те же доменные / междоменные политики, как и в XMLHttpRequest

Другой способ отправить информацию заголовка в JavaScript - это файлы cookie. Сервер может извлекать любые данные из заголовков запроса и отправлять их обратно в Set-Cookie заголовке ответа, а файлы cookie можно читать в JavaScript. Однако, как говорит Кепаро, лучше сделать это только для одного или двух заголовков, а не для всех.

Для тех, кто ищет способ преобразовать все заголовки 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"]

Вы не можете получить доступ к заголовкам http, но некоторая информация, представленная в них, доступна в DOM. Например, если вы хотите увидеть http referer (sic), используйте document.referrer. Для других HTTP-заголовков могут быть и другие подобные. Попробуйте поискать в Google конкретную вещь, например "http referer javascript".

Я знаю, что это должно быть очевидно, но я продолжал искать такие вещи, как «http headers javascript», когда все, что мне действительно нужно, это реферер, и не получил никаких полезных результатов. Не знаю, как я не понял, что могу сделать более конкретный запрос.

Если мы говорим о заголовках Request, вы можете создавать свои собственные заголовки при выполнении XmlHttpRequests.

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

Как и многие люди, я копался в сети без реального ответа :(

Тем не менее я нашел обходной путь, который может помочь другим. В моем случае я полностью контролирую свой веб-сервер. Фактически это часть моего приложения (см. Конец ссылки). Мне легко добавить скрипт в свой HTTP-ответ. Я модифицировал свой httpd-сервер, чтобы вставлять небольшой скрипт на каждую HTML-страницу. Я только добавляю дополнительную строку 'js script' сразу после создания заголовка, которая устанавливает существующую переменную из моего документа в моем браузере [я выбираю местоположение], но возможен любой другой вариант. Хотя мой сервер написан на 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, существует ли переменная или нет. В моем случае мне нужно знать, следует ли использовать профиль JSON или JSON-P, чтобы избежать проблемы CORS, но тот же метод можно использовать для других целей [например: выбор между сервером разработки / производства, получение с сервера 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

Ссылка Аллена Лалонда сделала мой день лучше. Просто добавьте сюда простой рабочий 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>

Ответ без дополнительного HTTP-вызова

Хотя в целом невозможно прочитать произвольные заголовки HTTP-ответа для HTML-навигации верхнего уровня, если вы управляете сервером (или промежуточными ящиками по пути) и хотите предоставить некоторую информацию для JavaScript, который может ' t легко раскрыть любым другим способом, кроме как через заголовок:

Вы можете использовать заголовок Server-Timing для предоставления произвольных данных "ключ-значение", которые будут доступны для чтения JavaScript.

(* в поддерживаемых браузерах: Firefox 61, Chrome 65, Edge 79; Safari еще нет с 2021.02; нет IE)

Пример:

server-timing: key;desc="value"

• Вы можете использовать этот заголовок несколько раз для нескольких фрагментов данных:

server-timing: key1;desc="value1"
server-timing: key2;desc="value2"

• или используйте его компактную версию, в которой вы представляете несколько фрагментов данных в одном заголовке, разделенных запятыми.

server-timing: key1;desc="value1", key2;desc="value2"

Пример того, как Википедия использует этот заголовок для отображения информации о попадании / пропуске кеша:

Пример кода (необходимо учитывать отсутствие поддержки браузеров в Safari и IE):

if (window.performance && performance.getEntriesByType) { // avoid error in Safari 10, IE9- and other old browsers
    let navTiming = performance.getEntriesByType('navigation')
    if (navTiming.length > 0) { // still not supported as of Safari 14...
        let serverTiming = navTiming[0].serverTiming
        if (serverTiming && serverTiming.length > 0) {
            for (let i=0; i<serverTiming.length; i++) {
                console.log(`${serverTiming[i].name} = ${serverTiming[i].description}`)
            }
        }
    }
}

Это регистрирует cache = hit-front в поддерживаемых браузерах.

Примечания:

• как упоминалось в MDN, API поддерживается только через HTTPS.
• если ваш JS обслуживается из другого домена, вам необходимо добавить Заголовок ответа Timing-Allow-Origin, чтобы данные были доступны для чтения в JS (Timing-Allow-Origin: * или Timing-Allow-Origin: https://www.example.com)
• Заголовки Server-Timing поддерживают также поле dur (заголовок), читаемое как duration на стороне JS, но это необязательно и по умолчанию 0 в JS, если не передано
• относительно поддержки Safari: см. ошибку 1 и ошибка 2 и ошибка 3
• Вы можете узнать больше о синхронизации сервера в этом сообщении в блоге
• Обратите внимание, что буферы записей производительности могут быть очищены JS на странице (через вызов API) или браузером, если страница выдает слишком много вызовов для подресурсов. По этой причине вам следует как можно скорее записать данные и / или вместо этого использовать PerformanceObserver API. Подробнее см. в блоге.

Я только что протестировал, и у меня это работает с использованием 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:

Чтобы получить заголовки как более удобный объект (улучшение ответа Раджи):

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;
}, {});

Используя mootools, вы можете использовать this.xhr.getAllResponseHeaders()

Это старый вопрос. Не уверен, когда поддержка станет более широкой, но теперь getAllResponseHeaders() и getResponseHeader() кажутся довольно стандартными: http://www.w3schools.com/xml/dom_http.asp

Как уже упоминалось, если вы контролируете серверную часть, тогда должна быть возможность отправить первоначальные заголовки запроса обратно клиенту в первоначальном ответе.

В Express, например, работает следующее:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Заголовки становятся доступными в шаблоне, поэтому их можно скрыть визуально, но включить в разметку и прочитать клиентским javascript.

Я думаю, что вопрос пошел неверным путем. Если вы хотите взять заголовок запроса из JQuery / JavaScript, ответ будет просто Нет. Другие решения - создать страницу aspx или страницу jsp, тогда мы можем легко получить доступ к заголовку запроса. Возьмите весь запрос на странице aspx и поместите в сеанс / файлы cookie, после чего вы сможете получить доступ к файлам cookie на странице JavaScript ..