Bagaimana saya bisa menambahkan header HTTP khusus ke permintaan ajax dengan js atau jQuery?

Jawaban:

585

Ada beberapa solusi tergantung pada apa yang Anda butuhkan ...

Jika Anda ingin menambahkan tajuk khusus (atau set tajuk) ke permintaan individual, cukup tambahkan headersproperti:

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

Jika Anda ingin menambahkan header default (atau set header) untuk setiap permintaan, gunakan $.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' } });

Jika Anda ingin menambahkan header (atau set header) untuk setiap permintaan, gunakan beforeSendhook dengan $.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' } });

Sunting (info lebih lanjut): Satu hal yang perlu diperhatikan adalah bahwa dengan ajaxSetupAnda hanya dapat menentukan satu set tajuk default dan Anda hanya dapat menentukan satu beforeSend. Jika Anda menelepon ajaxSetupbeberapa kali, hanya set header terakhir yang akan dikirim dan hanya callback sebelum-kirim terakhir yang akan dieksekusi.

Prestaul
sumber
Apa yang terjadi jika saya mendefinisikan baru beforeSendketika melakukan $.ajax?
Kostas
3
Anda hanya dapat menetapkan satu beforeSendpanggilan balik. Jika Anda menelepon $.ajaxSetup({ beforeSend: func... })dua kali maka panggilan balik kedua akan menjadi satu-satunya yang menyala.
Prestaul
1
Memperbarui jawaban saya untuk menambahkan detail lebih lanjut tentang ajaxSetup.
Prestaul
2
Sepertinya itu tidak berfungsi dengan Permintaan CORS (setiap browser). Apakah ada pekerjaan?
svassr
1
@ Si8, itu terlihat seperti masalah lintas domain bagi saya. Anda tidak dapat membuat permintaan dari satu domain ke domain lain. Coba tengok CORS dan lihat apakah itu membantu.
Prestaul
54

Atau, jika Anda ingin mengirim tajuk khusus untuk setiap permintaan di masa mendatang, maka Anda dapat menggunakan yang berikut:

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

Dengan cara ini setiap permintaan ajax di masa depan akan berisi tajuk khusus, kecuali secara eksplisit ditimpa oleh opsi permintaan. Anda dapat menemukan info lebih lanjut di ajaxSetup sini

Szilard Muzsi
sumber
1
Di mana saya benar-benar ingin menyelesaikan ini, ini sepertinya tidak berhasil.
Perjalanan
1
Yah Anda harus memastikan bahwa ajaxSetup dipanggil sebelum panggilan ajax yang sebenarnya. Saya tidak tahu alasan lain mengapa ini tidak berhasil :)
Szilard Muzsi
20

Dengan asumsi JQuery ajax, Anda dapat menambahkan header khusus seperti -

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

Berikut ini contoh menggunakan 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++;
}; 

Semoga itu bisa membantu.

Jika Anda membuat objek Anda, Anda bisa menggunakan fungsi setRequestHeader untuk menetapkan nama, dan nilai sebelum Anda mengirim permintaan.

James
sumber
2
Meskipun ini mungkin benar pada tahun 2011, umumnya merupakan ide yang bagus untuk tidak menemukan kembali roda, dan alih-alih menggunakan pustaka AJAX seperti Zepto atau jQuery.
Dan Dascalescu
4
Kecuali Anda mencoba menambahkan header ke panggilan XHR2 yang ada dan tidak ingin mulai menulis ulang semuanya untuk menggunakan jQuery hanya untuk itu ... Pada titik itu, @gryzzly memiliki satu-satunya jawaban yang layak.
roryhewitt
@AliGajani Masalahnya adalah aplikasi atau pustaka tertentu (seperti THREE.js) tidak menggunakan $.ajax*fungsi b / c mereka tidak bergantung pada jQuery dan sebaliknya menggunakan XHR jadi ini adalah satu-satunya pilihan yang valid dalam kasus-kasus tersebut.
Coburn
1
@AliGajani Selain itu, ini bukan hanya waktu buka jaringan tetapi waktu parsing perpustakaan. Plus, jika Anda tidak berhati-hati dengan dependensi apa yang Anda tambahkan, Anda dapat dengan cepat mendapatkan proyek dengan dependensi terlalu banyak
Oztaco - Reinstate Monica C.
19

Anda juga dapat melakukan ini tanpa menggunakan jQuery. Ganti metode pengiriman XMLHttpRequest dan tambahkan header di sana:

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;
Roland T.
sumber
12

Anda harus menghindari penggunaan $.ajaxSetup()seperti yang dijelaskan dalam dokumen . Gunakan yang berikut ini sebagai gantinya:

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

Dengan asumsi yang Anda maksud "Ketika menggunakan ajax" dan " header Permintaan HTTP ", kemudian gunakan headersproperti di objek yang Anda lewatiajax()

header (ditambahkan 1,5)

Default: {}

Peta kunci tajuk tambahan / pasangan nilai untuk dikirim bersama dengan permintaan. Pengaturan ini diatur sebelum fungsi beforeSend dipanggil; oleh karena itu, nilai apa pun dalam pengaturan tajuk dapat ditimpa dari dalam fungsi beforeSend.

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

Quentin
sumber
1

Anda dapat menggunakan js fetch

Kamil Kiełczewski
sumber