How to add headers before sending Ajax Request using jQuery?

Above code should work, and if it is not working, try adding headers using jQurey ajax as shown below

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

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.

OR set multiple headers for every request

$.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' } });

Hope it helps.

You can also use XMLhttprequest, instead of jQuery to set headers

function setHeaders(headers){
  for(let key in headers){
    xhr.setRequestHeader(key, headers[key]) 
  }
}

var req = new XMLHttpRequest();
req.onreadystatechange=handleStateChange;
req.open("GET", "url", true);
setHeaders({"Host":"api.domain.com","X-Requested-With":"XMLHttpRequest","contentType":"application/json"}); //set multiple headers
req.send();

This is JS based solution.