如何使用 js 或 jQuery 向 ajax 请求添加自定义 HTTP 标头？

Question

有人知道如何使用 JavaScript 或 jQuery 添加或创建自定义 HTTP 标头吗？

Answer 1

根据您的需要，有几种解决方案...

如果您想为单个请求添加自定义标头（或一组标头），则只需添加 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，只会发送最后一组headers，并且只会执行最后一个before-send回调。

Answer 2

或者，如果您想为以后的每个请求发送自定义标头，那么您可以使用以下内容：

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

这样，每个未来的 ajax 请求都将包含自定义标头，除非被请求的选项明确覆盖。你可以在ajaxSetuphere找到更多信息

Answer 3

您也可以在不使用 jQuery 的情况下执行此操作。覆盖 XMLHttpRequest 的 send 方法并在此处添加标头：

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;

Answer 4

假设 JQuery ajax，您可以添加自定义标题 -

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

Answer 5

这是一个使用 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 函数分配名称和值。

Answer 6

您应该避免使用$.ajaxSetup()，如docs 中所述。请改用以下内容：

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

Answer 7

假设您的意思是“使用 ajax 时”和“一个 HTTP Request 标头”，则在传递给 ajax() 的对象中使用 headers 属性

标题（添加 1.5）

默认：{}

与请求一起发送的附加标头键/值对的映射。此设置在调用 beforeSend 函数之前设置；因此，headers 设置中的任何值都可以在 beforeSend 函数中被覆盖。

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

Answer 8

应该使用XMLHttpRequest对象的“setRequestHeader”方法

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

Answer 9

可以使用jsfetch

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