Does anyone know how to add or create a custom HTTP header using JavaScript or jQuery?
This question is related to
javascript
jquery
ajax
http-headers
httprequest
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.
Assuming JQuery ajax, you can add custom headers like -
$.ajax({
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("custom_header", "value");
},
success: function(data) {
}
});
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');
});
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.
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
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;
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.
You can use js fetch
async function send(url,data) {_x000D_
let r= await fetch(url, {_x000D_
method: "POST", _x000D_
headers: {_x000D_
"My-header": "abc" _x000D_
},_x000D_
body: JSON.stringify(data), _x000D_
})_x000D_
return await r.json()_x000D_
}_x000D_
_x000D_
// Example usage_x000D_
_x000D_
let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=my-header';_x000D_
_x000D_
async function run() _x000D_
{_x000D_
let jsonObj = await send(url,{ some: 'testdata' });_x000D_
console.log(jsonObj[0].request.httpMethod + ' was send - open chrome console > network to see it');_x000D_
}_x000D_
_x000D_
run();
_x000D_
"setRequestHeader" method of XMLHttpRequest object should be used
Source: Stackoverflow.com