How can I add a custom HTTP header to ajax request with js or jQuery?
JavascriptJqueryAjaxHttp HeadersHttprequestJavascript Problem Overview
Does anyone know how to add or create a custom HTTP header using JavaScript or jQuery?
Javascript Solutions
Solution 1 - Javascript
There are several solutions depending on what you need...
If you want to add a custom header (or set of headers) to an individual request then just add the headers
property:
// Request with custom header
$.ajax({
url: 'foo/bar',
headers: { 'x-my-custom-header': 'some value' }
});
If you want to add a default header (or set of headers) to every request then use $.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' } });
If you want to add a header (or set of headers) to every request then use the beforeSend
hook with $.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' } });
Edit (more info): One thing to be aware of is that with ajaxSetup
you can only define one set of default headers and you can only define one beforeSend
. If you call ajaxSetup
multiple times, only the last set of headers will be sent and only the last before-send callback will execute.
Solution 2 - Javascript
Or, if you want to send the custom header for every future request, then you could use the following:
$.ajaxSetup({
headers: { "CustomHeader": "myValue" }
});
This way every future ajax request will contain the custom header, unless explicitly overridden by the options of the request. You can find more info on ajaxSetup
here
Solution 3 - Javascript
You can also do this without using jQuery. Override XMLHttpRequest's send method and add the header there:
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;
Solution 4 - Javascript
Assuming JQuery ajax, you can add custom headers like -
$.ajax({
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("custom_header", "value");
},
success: function(data) {
}
});
Solution 5 - Javascript
Here's an example using 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++;
};
Hope that helps.
If you create your object, you can use the setRequestHeader function to assign a name, and a value before you send the request.
Solution 6 - Javascript
You should avoid the usage of $.ajaxSetup()
as described in the docs. Use the following instead:
$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
jqXHR.setRequestHeader('my-custom-header', 'my-value');
});
Solution 7 - Javascript
Assuming that you mean "When using ajax" and "An HTTP Request header", then use the headers
property in the object you pass to ajax()
> 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.
Solution 8 - Javascript
"setRequestHeader" method of XMLHttpRequest object should be used
Solution 9 - Javascript
You can use 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();