关于javascript：如何使用js或jQuery为ajax请求添加自定义HTTP标头？


How can I add a custom HTTP header to ajax request with js or jQuery?

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

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

如果要将自定义标头(或标头集)添加到单个请求，则只需添加headers属性：

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

如果要为每个请求添加默认标头(或标头集)，请使用$.ajaxSetup()：

1
2
3
4
5
6
7
8
9
$.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()：

1
2
3
4
5
6
7
8
9
10
11
$.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，则只会发送最后一组标题，并且只会执行最后一次发送前回调。

相关讨论

或者，如果要为每个将来的请求发送自定义标头，则可以使用以下内容：

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

这样，除非被请求的选项明确覆盖，否则每个未来的ajax请求都将包含自定义标头。您可以在此处找到有关ajaxSetup的更多信息

相关讨论

以下是使用XHR2的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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('
Your 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函数在发送请求之前指定名称和值。

相关讨论

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

1
2
3
4
5
6
7
8
$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header","value");
  },
  success: function(data) {
  }
});

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

1
2
3
4
5
6
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;

您应该避免使用文档中描述的$.ajaxSetup()。请改用以下内容：

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

假设您的意思是"当使用ajax"和"HTTP请求标头"时，请使用传递给ajax()的对象中的headers属性

headers(added 1.5)

Default: {}

A map of additional header key/value pairs to send along with the request. This setting is set before the beforeSend function is called; therefore, any values in the headers setting can be overwritten from within the beforeSend function.

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

应该使用XMLHttpRequest对象的"setRequestHeader"方法

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

你可以使用js fetch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();