Jak mogę dodać niestandardowy nagłówek HTTP do żądania ajax za pomocą js lub jQuery?

Czy ktoś wie, jak dodać lub utworzyć niestandardowy nagłówek HTTP za pomocą JavaScript lub jQuery?

Istnieje kilka rozwiązań w zależności od potrzeb ...

Jeśli chcesz dodać niestandardowy nagłówek (lub zestaw nagłówków) do pojedynczego żądania, po prostu dodaj headerswłaściwość:

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

Jeśli chcesz dodać domyślny nagłówek (lub zestaw nagłówków) do każdego żądania, użyj $.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' } });

Jeśli chcesz dodać nagłówek (lub zestaw nagłówków) do każdego żądania, użyj beforeSendhaka z $.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' } });

Edycja (więcej informacji): Należy pamiętać, że dzięki ajaxSetupniemu możesz zdefiniować tylko jeden zestaw domyślnych nagłówków i możesz zdefiniować tylko jeden beforeSend. Jeśli zadzwonisz ajaxSetupwiele razy, zostanie wysłany tylko ostatni zestaw nagłówków i zostanie wykonane tylko ostatnie wywołanie zwrotne przed wysłaniem.

Lub, jeśli chcesz wysłać niestandardowy nagłówek dla każdego przyszłego żądania, możesz użyć następujących opcji:

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

W ten sposób każde przyszłe żądanie ajax będzie zawierać niestandardowy nagłówek, chyba że zostanie wyraźnie zastąpione przez opcje żądania. Więcej informacji znajdziesz ajaxSetup tutaj

Zakładając, że JQuery ajax, możesz dodać niestandardowe nagłówki, takie jak -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});

Oto przykład z użyciem 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++;
}; 

Mam nadzieję, że to pomaga.

Jeśli tworzysz swój obiekt, możesz użyć funkcji setRequestHeader, aby przypisać nazwę i wartość przed wysłaniem żądania.

Możesz to również zrobić bez użycia jQuery. Zastąp metodę wysyłania XMLHttpRequest i dodaj tam nagłówek:

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;

Powinieneś unikać używania $.ajaxSetup()zgodnie z opisem w dokumentacji . Zamiast tego użyj następujących opcji:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});

Zakładając, że masz na myśli „Gdy używasz ajax” i „ Nagłówek żądania HTTP ”, użyj headerswłaściwości w przekazanym obiekcieajax()

nagłówki (dodano 1.5)

Domyślna: {}

Mapa dodatkowych par klucz / wartość nagłówka do wysłania wraz z żądaniem. To ustawienie jest ustawiane przed wywołaniem funkcji beforeSend; dlatego wszelkie wartości w ustawieniach nagłówków można nadpisać z poziomu funkcji beforeSend.

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

Należy użyć metody „setRequestHeader” obiektu XMLHttpRequest

http://help.dottoro.com/ljhcrlbv.php

Możesz użyć pobierania js

async function send(url,data) {
  let r= await fetch(url, {
        method: "POST", 
        headers: {
          "My-header": "abc"  
        },
        body: JSON.stringify(data), 
  })
  return await r.json()
}

// Example usage

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=my-header';

async function run() 
{
 let jsonObj = await send(url,{ some: 'testdata' });
 console.log(jsonObj[0].request.httpMethod + ' was send - open chrome console > network to see it');
}

run();