Как я могу добавить собственный HTTP-заголовок к ajax-запросу с помощью js или jQuery?

Ответы:

585

Есть несколько решений в зависимости от того, что вам нужно ...

Если вы хотите добавить пользовательский заголовок (или набор заголовков) к отдельному запросу, просто добавьте headersсвойство:

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Если вы хотите добавить заголовок по умолчанию (или набор заголовков) к каждому запросу, используйте $.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Если вы хотите добавить заголовок (или набор заголовков) к каждому запросу, используйте beforeSendхук с $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Редактировать (больше информации): одна вещь, о которой следует помнить, это то, что ajaxSetupвы можете определить только один набор заголовков по умолчанию, а вы можете определить только один beforeSend. Если вы звоните ajaxSetupнесколько раз, будет отправлен только последний набор заголовков и будет выполнен только последний обратный вызов перед отправкой.

Prestaul
источник
Что произойдет, если я определю новый beforeSendпри выполнении $.ajax?
Костас
3
Вы можете определить только один beforeSendобратный вызов. Если вы звоните $.ajaxSetup({ beforeSend: func... })дважды, то срабатывает только второй обратный вызов.
Prestaul
1
Обновил мой ответ, чтобы добавить больше деталей о ajaxSetup.
Prestaul
2
Похоже, он не работает с CORS Request (для каждого браузера). Есть ли работа вокруг?
svassr
1
@ Si8, для меня это похоже на междоменную проблему. Вы не можете сделать запрос от одного домена к другому. Попробуйте заглянуть в CORS и посмотрите, поможет ли это.
Prestaul
54

Или, если вы хотите отправить пользовательский заголовок для каждого будущего запроса, вы можете использовать следующее:

$.ajaxSetup({
    headers: { "CustomHeader": "myValue" }
});

Таким образом, каждый будущий ajax-запрос будет содержать пользовательский заголовок, если он явно не переопределен параметрами запроса. Вы можете найти больше информации ajaxSetup здесь

Сцилард Музси
источник
1
Там, где я действительно хочу достичь этого, это, похоже, на самом деле не работает.
Поездка
1
Хорошо, вы должны убедиться, что ajaxSetup вызывается перед фактическим вызовом ajax. Я не знаю ни одной другой причины, по которой это не сработало бы :)
Сцилард Музси
20

Предполагая JQuery ajax, вы можете добавить пользовательские заголовки, такие как -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});
Джаендра
источник
19

Вот пример использования XHR2:

function xhrToSend(){
    // Attempt to creat the XHR2 object
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        try{
            xhr = new XDomainRequest();
        } catch (e){
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    statusField('\nYour browser is not' + 
                        ' compatible with XHR2');                           
                }
            }
        }
    }
    xhr.open('POST', 'startStopResume.aspx', true);
    xhr.setRequestHeader("chunk", numberOfBLObsSent + 1);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            receivedChunks++;
        }
    };
    xhr.send(chunk);
    numberOfBLObsSent++;
}; 

Надеюсь, это поможет.

Если вы создаете свой объект, вы можете использовать функцию setRequestHeader, чтобы назначить имя и значение перед отправкой запроса.

Джеймс
источник
2
Хотя это могло быть правильным в 2011 году, как правило, неплохо бы не изобретать велосипед, а вместо этого использовать библиотеку AJAX, такую ​​как Zepto или jQuery.
Дан Даскалеску
4
Если вы не пытаетесь добавить заголовок к существующему вызову XHR2 и не хотите начинать переписывать все это, чтобы использовать jQuery только для этого ... В этот момент у @gryzzly есть единственный жизнеспособный ответ.
Рорихевт
@AliGajani Проблема в том, что некоторые приложения или библиотеки (например, THREE.js) не используют $.ajax*функции b / c, они не зависят от jQuery и вместо этого используют XHR, так что это единственная допустимая опция в этих случаях.
Коберн
1
@AliGajani Кроме того, это не только время загрузки сети, но и время анализа библиотеки. Кроме того, если вы не будете осторожны с добавляемыми зависимостями, вы можете быстро получить проект со слишком многими зависимостями
Oztaco - Восстановите Monica C.
19

Вы также можете сделать это без использования jQuery. Переопределите метод отправки XMLHttpRequest и добавьте туда заголовок:

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
var newSend = function(vData) {
    this.setRequestHeader('x-my-custom-header', 'some value');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;
Роланд Т.
источник
12

Вы должны избегать использования, $.ajaxSetup()как описано в документации . Вместо этого используйте следующее:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});
Стефан Д.
источник
6

Предполагая, что вы имеете в виду «При использовании ajax» и « Заголовок HTTP- запроса », используйте headersсвойство в объекте, который вы передаетеajax()

заголовки (добавлено 1,5)

По умолчанию: {}

Карта дополнительных пар ключ / значение заголовка для отправки вместе с запросом. Этот параметр устанавливается до вызова функции beforeSend; поэтому любые значения в настройке заголовков могут быть перезаписаны из функции beforeSend.

- http://api.jquery.com/jQuery.ajax/

Quentin
источник
1

Вы можете использовать js fetch

Камил Келчевски
источник