How to add a custom HTTP header to ajax request with javascript

Question

Is there any way to add a custom HTTP header to ajax request with javascript?

Answer 1

Hello @kartik,

There is different way based on the condition

To add a custom header  to an individual request then just add the headers property:

// Request with custom header
$.ajax({
    url: 'edureka/co',
    headers: { 'custom-header': 'some value' }
});

To add a default header to every request then use $.ajaxSetup():

$.ajaxSetup({
    headers: { 'custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'edureka/co' });

// Overwrites the default header with a new header
$.ajax({ url: 'edureka/co', headers: { 'some-other-header': 'some value' } });

To add a header to every request then use the beforeSend hook with $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('custom-header', 'some value');
    }
});
// Sends your custom header
$.ajax({ url: 'edureka/co' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Hope it helps!! If not then you should enroll with one of our Java certification course.
Thank You!