Доступ к HTTP-заголовкам веб-страницы в JavaScript

Как получить доступ к заголовкам HTTP-ответов 9X_vanillajs страницы с помощью JavaScript?

Относится 9X_http-headers к this question, который был изменен, чтобы запрашивать 9X_javascript-dom доступ к двум определенным заголовкам HTTP.

По теме:
How do I access the HTTP request header fields via JavaScript?

479
1

  • @ user2284570 - Нет. этот вопрос касается заголовков * ответа *, а не заголовков ...
15
Общее количество ответов: 15

Ответ #1

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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


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

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

410
8

  • Я бы подумал о том, чтобы пометить это, чтобы модератор мог правильно отметить. Отвечает н ...

Ответ #2

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

К сожалению, не существует API, который 9X_http-headers бы предоставил вам заголовки HTTP-ответа 9X_vanilla-js для вашего начального запроса страницы. Это 9X_.js был исходный вопрос, размещенный здесь. Это 9X_javascript-library тоже было repeatedly asked, потому что некоторые люди хотели 9X_javascript бы получать фактические заголовки ответа 9X_ecmascript исходного запроса страницы, не отправляя 9X_javascript-library другой.


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

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

myXMLHttpRequest.getAllResponseHeaders();

Это не даст вам информации 9X_vanillajs о заголовках HTTP-ответа исходного запроса 9X_javascript-execution страницы, но его можно использовать для 9X_.js обоснованного предположения о том, что это 9X_javascript были за заголовки. Подробнее об этом рассказывается 9X_ecmascript далее.


Получение значений заголовка из запроса начальной страницы:

Этот вопрос впервые был задан несколько 9X_vanillajs лет назад, в частности, как получить исходные 9X_ecmascript заголовки HTTP-ответа для текущей страницы (т. е. той же 9X_js страницы, внутри которой был запущен javascript). Это 9X_vanilla-js совсем другой вопрос, чем просто получение 9X_.js заголовков ответа на любой HTTP-запрос. Для 9X_javascript исходного запроса страницы заголовки недоступны 9X_vanillajs для javascript. Будет ли нужные вам значения 9X_js заголовка надежно и достаточно согласованными, если 9X_javascript-dom вы снова запросите ту же страницу через 9X_javascript-library AJAX, будет зависеть от вашего конкретного 9X_javascript-library приложения.

Ниже приведены несколько советов 9X_http-headers по решению этой проблемы.


1. Запросы к ресурсам, которые в основном статичны

Если ответ в основном 9X_http статический и не ожидается, что заголовки 9X_javascript сильно изменятся между запросами, вы можете 9X_vanillajs сделать запрос AJAX для той же страницы, на 9X_.js которой вы сейчас находитесь, и предположить, что 9X_http это те же значения, которые были частью 9X_javascript-dom HTTP-ответа страницы. Это может позволить 9X_http-headers вам получить доступ к нужным заголовкам 9X_vanilla-javascript с помощью красивого API XMLHttpRequest, описанного 9X_js выше.

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

Этот подход будет проблематичным, если 9X_vanilla-javascript вам действительно придется полагаться на 9X_http-headers согласованность значений между запросами, поскольку 9X_.js вы не можете полностью гарантировать, что 9X_javascript они одинаковы. Это будет зависеть от вашего 9X_javascript-dom конкретного приложения и от того, знаете 9X_javascript-execution ли вы, что нужное вам значение не будет 9X_.js меняться от одного запроса к другому.


2. Сделайте выводы

Есть 9X_vanilla-javascript некоторые свойства спецификации (объектная модель браузера), которые браузер 9X_javascript определяет, просматривая заголовки. Некоторые 9X_vanillajs из этих свойств напрямую отражают заголовки 9X_vanillajs HTTP (например, для navigator.userAgent установлено значение 9X_javascript поля заголовка HTTP User-Agent). Обнюхивая доступные 9X_javascript-library свойства, вы можете найти то, что вам нужно, или 9X_javascript-execution некоторые подсказки, чтобы указать, что 9X_javascript-execution содержится в ответе HTTP.


3. Уберите их

Если вы контролируете 9X_vanilla-js сторону сервера, вы можете получить доступ 9X_.js к любому заголовку, который вам нравится, когда 9X_vanillajs вы создаете полный ответ. Значения могут 9X_javascript-library быть переданы клиенту вместе со страницей, спрятаны 9X_http в некоторой разметке или, возможно, во встроенной 9X_http-headers структуре JSON. Если вы хотите, чтобы каждый 9X_http-headers заголовок HTTP-запроса был доступен для 9X_ecmascript вашего javascript, вы могли бы перебирать 9X_http их на сервере и отправлять их обратно как 9X_vanilla-javascript скрытые значения в разметке. Вероятно, это 9X_ecmascript не идеальный вариант для отправки значений 9X_http-headers заголовков таким образом, но вы, безусловно, можете 9X_http сделать это для конкретного значения, которое 9X_ecmascript вам нужно. Возможно, это решение тоже неэффективно, но 9X_http-headers оно сработает, если вам это нужно.

332
3

  • Для тех, кому интересно, BOM расшифровывается как «объектная модель браузера». См. Http://stackoverflow.com/questions/2213594/whats-the-difference-between-th ...

Ответ #3

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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

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

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

Всего 2 цента

31
0

Ответ #4

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Решение с сервис-воркерами

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

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

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

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

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

Ограничения:

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

Ответ #5

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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

Хотя в целом невозможно прочитать произвольные 9X_.js заголовки HTTP-ответа для HTML-навигации 9X_javascript-library верхнего уровня, если вы управляете сервером 9X_javascript (или промежуточными ящиками по пути) и хотите 9X_javascript предоставить некоторую информацию для JavaScript. которые 9X_javascript нельзя легко раскрыть никаким другим способом, кроме 9X_vanilla-js как через заголовок:

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

(* в поддерживаемых браузерах: Firefox 61, Chrome 65, Edge 79; no Safari yet и нет ближайших планов поставки с 2021.09; нет IE)

Пример:

server-timing: key;desc="value"
server-timing: key1;desc="value1"
server-timing: key2;desc="value2"
  • или используйте его компактную версию, в которой вы представляете несколько фрагментов данных в одном заголовке, разделенных запятыми.
server-timing: key1;desc="value1", key2;desc="value2"

Пример того, как 9X_vanilla-js Wikipedia использует этот заголовок для предоставления 9X_vanilla-javascript информации о попадании / промахе в кеш:

9X_Доступ к HTTP-заголовкам веб-страницы в JavaScript_vanilla-javascript

Пример 9X_javascript-dom кода (необходимо учитывать отсутствие поддержки 9X_js браузеров в 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

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

Примечания:

  • as mentioned on 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: см. bug 1 и bug 2 и bug 3
  • Подробнее о времени сервера можно прочитать в this blog post
  • Обратите внимание, что буферы записей производительности могут быть очищены JS на странице (через вызов API) или браузером, если страница выдает слишком много обращений к подресурсам. По этой причине вам следует как можно скорее захватить данные и / или использовать вместо них PerformanceObserver API. Подробнее см. blog post.

22
0

Ответ #6

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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

20
1

  • Этот подход по-прежнему требует, чтобы вы контролировали сервер для вашего JS. Независимо от того, как вы передаете эту информацию, ваш код внезапно стал некэшируемым. Почему ...

Ответ #7

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Для тех, кто ищет способ преобразовать все 9X_.js заголовки HTTP в объект, к которому можно 9X_http-headers получить доступ как словарь headers["content-type"], я создал функцию 9X_http-headers 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"]

16
0

Ответ #8

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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

Я знаю, что это 9X_vanilla-javascript должно быть очевидно, но я продолжал искать 9X_http такие вещи, как "http headers javascript", когда 9X_javascript все, что мне действительно нужно, это ссылка, и 9X_http-headers не получал никаких полезных результатов. Не 9X_.js знаю, как я не понял, что могу задать более 9X_javascript конкретный запрос.

8
0

Ответ #9

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Как и многие люди, я копался в сети, но 9X_vanilla-js не получил реального ответа :(

Тем не менее 9X_javascript я нашел обходной путь, который может помочь 9X_javascript-execution другим. В моем случае я полностью контролирую 9X_vanillajs свой веб-сервер. Фактически это часть моего 9X_.js приложения (см. Конец ссылки). Мне легко 9X_vanilla-js добавить скрипт в свой HTTP-ответ. Я модифицировал 9X_http свой httpd-сервер, чтобы вставлять небольшой 9X_js скрипт в каждую HTML-страницу. Я только 9X_vanilla-js добавляю дополнительную строку 'js script' сразу 9X_js после создания заголовка, которая устанавливает 9X_javascript-library существующую переменную из моего документа 9X_.js в моем браузере [я выбираю местоположение], но 9X_ecmascript возможен любой другой вариант. Хотя мой 9X_vanillajs сервер написан на nodejs, я не сомневаюсь, что 9X_vanilla-javascript тот же метод можно использовать в PHP или 9X_javascript других.

  case ".html":
    response.setHeader("Content-Type", "text/html");
    response.write ("")
    // process the real contend of my page

Теперь на каждой странице html, загруженной 9X_js с моего сервера, этот скрипт запускается 9X_ecmascript браузером на приеме. Затем я могу легко 9X_js проверить с помощью JavaScript, существует 9X_.js ли переменная или нет. В моем случае мне 9X_js нужно знать, следует ли использовать профиль 9X_javascript-dom JSON или JSON-P, чтобы избежать проблемы 9X_vanilla-javascript с CORS, но тот же метод можно использовать 9X_javascript-library для других целей [например: выбор между 9X_javascript-dom сервером разработки / производства, получение 9X_vanilla-js с сервера REST / API ключ и т. д ....]

В 9X_vanilla-javascript браузере вам просто нужно проверить переменную 9X_javascript-dom прямо из JavaScript, как в моем примере, где 9X_javascript-library я использую ее для выбора своего профиля 9X_vanillajs 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);

Для тех, кто когда-нибудь захочет 9X_ecmascript проверить мой код: https://www.npmjs.org/package/gpsdtracking

6
0

Ответ #10

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Ссылка Аллена Лалонда сделала мой день лучше. Просто 9X_http добавьте сюда простой рабочий HTML-код.
Работает 9X_.js с любым разумным браузером, начиная с IE9 9X_javascript-execution + и Presto-Opera 12.


(XHR) Show all response headers

All Response Headers with XHR

Примечание. Вы получаете 9X_javascript-execution заголовки второго запроса, результат может 9X_http-headers отличаться от исходного запроса.


Другой способ

- это более современный API fetch().
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
За caniuse.com он поддерживается Firefox 40, Chrome 42, Edge 14, Safari 11
Рабочий пример кода:


fetch() all Response Headers

All Response Headers with fetch()

6
0

Ответ #11

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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

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

5
2

  • Доступ в исходном вопросе касается получения заголовк ...

Ответ #12

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Чтобы получить заголовки как более удобный 9X_.js объект (улучшение 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;
}, {});

5
1

  • @LetsGoBrandon Это регулярное выражение заменяет разрывы строк. Разные ОС ...

Ответ #13

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

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

3
0

Ответ #14

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Я только что протестировал, и у меня это 9X_vanilla-javascript работает в Chrome версии 28.0.1500.95.

Мне 9X_vanilla-javascript нужно было загрузить файл и прочитать имя 9X_javascript файла. Имя файла указано в заголовке, поэтому 9X_.js я сделал следующее:

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

3
0

Ответ #15

Ответ на вопрос: Доступ к HTTP-заголовкам веб-страницы в JavaScript

Это мой сценарий для получения всех заголовков 9X_http-headers ответов:

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

Имея в результате заголовки ответа.

9X_Доступ к HTTP-заголовкам веб-страницы в JavaScript_http

Это 9X_vanilla-javascript сравнительный тест с использованием Hurl.it:

9X_Доступ к HTTP-заголовкам веб-страницы в JavaScript_javascript-library

3
0