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

https://stackoverflow.com/questions/220231

03-07-2019
|

Вопрос

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

Связанный с этот вопрос, который был изменен, чтобы запрашивать доступ к двум конкретным HTTP-заголовкам.

Похожие:
Как мне получить доступ к полям заголовка HTTP-запроса с помощью JavaScript?

Решение 2

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

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

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

myXMLHttpRequest.getAllResponseHeaders();

API был указан в следующей рекомендации кандидата для XMLHttpRequest: XMLHttpRequest - Рекомендация кандидата в W3C от 3 августа 2010
В частности, getAllResponseHeaders() метод был указан в следующем разделе: w3.org: XMLHttpRequest:тот самый getallresponseheaders() способ
Документация MDN тоже хороша: developer.mozilla.org: XMLHttpRequest.

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

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

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

Ниже приведено несколько советов, как обойти эту проблему.

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

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

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.Делайте Выводы

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

3.Спрячь их

Если вы управляете серверной частью, вы можете получить доступ к любому заголовку, который вам нравится, при создании полного ответа.Значения могут быть переданы клиенту вместе со страницей, спрятаны в какой-либо разметке или, возможно, во встроенной структуре JSON.Если вы хотите, чтобы каждый заголовок HTTP-запроса был доступен вашему javascript, вы могли бы выполнить итерацию по ним на сервере и отправить их обратно как скрытые значения в разметке.Вероятно, не идеально отправлять значения заголовка таким образом, но вы, безусловно, могли бы сделать это для конкретного значения, которое вам нужно.Это решение, возможно, тоже неэффективно, но оно справилось бы с задачей, если бы вам это было нужно.

Другие советы

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

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

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

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

Лучший случай - это просто сделать HEAD запросите, а затем изучите заголовки.

Для получения некоторых примеров выполнения этого взгляните на http://www.jibbering.com/2002/4/httprequest.html

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

Решение с привлечением сервисных работников

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

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

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

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

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

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

веб-сайт должен быть включен HTTPS
браузер должен поддерживать Работники сферы обслуживания 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"]

Если мы говорим о Запрос заголовки, вы можете создавать свои собственные заголовки при выполнении 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 refererer javascript".

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

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

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

Тем не менее, я нашел обходной путь, который мог бы помочь другим.В моем случае я полностью контролирую свой веб-сервер.На самом деле это часть моего приложения (см. конечную ссылку).Мне легко добавить скрипт к моему 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 profile, чтобы избежать проблемы с 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

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

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

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

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;
}, {});
console.log(headers);

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow