Làm cách nào tôi có thể thêm tiêu đề HTTP tùy chỉnh vào yêu cầu ajax bằng js hoặc jQuery?

Có ai biết cách thêm hoặc tạo một tiêu đề HTTP tùy chỉnh bằng JavaScript hoặc jQuery không?

Có một số giải pháp tùy thuộc vào những gì bạn cần ...

Nếu bạn muốn thêm một tiêu đề tùy chỉnh (hoặc bộ tiêu đề) vào một yêu cầu riêng lẻ thì chỉ cần thêm thuộc headerstính:

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

Nếu bạn muốn thêm một tiêu đề mặc định (hoặc bộ tiêu đề) cho mọi yêu cầu thì hãy sử dụng $.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' } });

Nếu bạn muốn thêm một tiêu đề (hoặc bộ tiêu đề) cho mọi yêu cầu thì hãy sử dụng beforeSendhook với $.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' } });

Chỉnh sửa (thông tin thêm): Một điều cần lưu ý là với ajaxSetupbạn chỉ có thể xác định một bộ tiêu đề mặc định và bạn chỉ có thể xác định một beforeSend. Nếu bạn gọi ajaxSetupnhiều lần, chỉ bộ tiêu đề cuối cùng sẽ được gửi và chỉ lần gọi lại trước khi gửi cuối cùng mới thực hiện.

Hoặc, nếu bạn muốn gửi tiêu đề tùy chỉnh cho mọi yêu cầu trong tương lai, thì bạn có thể sử dụng như sau:

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

Bằng cách này, mọi yêu cầu ajax trong tương lai sẽ chứa tiêu đề tùy chỉnh, trừ khi được ghi đè rõ ràng bởi các tùy chọn của yêu cầu. Bạn có thể tìm thêm thông tin ajaxSetup ở đây

Giả sử ajax của JQuery, bạn có thể thêm các tiêu đề tùy chỉnh như -

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

Đây là một ví dụ sử dụng 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++;
}; 

Mong rằng sẽ giúp.

Nếu bạn tạo đối tượng của mình, bạn có thể sử dụng hàm setRequestHeader để gán tên và giá trị trước khi bạn gửi yêu cầu.

Bạn cũng có thể làm điều này mà không cần sử dụng jQuery. Ghi đè phương thức gửi của XMLHttpRequest và thêm tiêu đề vào đó:

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;

Bạn nên tránh sử dụng $.ajaxSetup()như được mô tả trong các tài liệu . Sử dụng như sau thay thế:

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

Giả sử rằng bạn có nghĩa là "Khi sử dụng ajax" và " Tiêu đề yêu cầu HTTP ", sau đó sử dụng thuộc headerstính trong đối tượng bạn chuyển đếnajax()

tiêu đề (thêm 1,5)

Mặc định: {}

Một bản đồ của các cặp khóa / giá trị tiêu đề bổ sung để gửi cùng với yêu cầu. Cài đặt này được đặt trước khi hàm beforeSend được gọi; do đó, mọi giá trị trong cài đặt tiêu đề có thể được ghi đè từ bên trong hàm beforeSend.

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

Nên sử dụng phương thức "setRequestHeader" của đối tượng XMLHttpRequest

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

Bạn có thể sử dụng js fetch

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