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

Question

Does anyone know how to add or create a custom HTTP header using JavaScript or jQuery

User · Answer

You can use js fetch    x000D   x000D  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 amp status 200 amp methods POST amp 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  gt  network to see it    x000D    x000D   x000D  run    x000D   x000D   x000D

User · Answer

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        http   api jquery com jQuery ajax

User · Answer

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

User · Answer

Assuming JQuery ajax  you can add custom headers like -     ajax     url  url    beforeSend  function xhr        xhr setRequestHeader  custom header    value           success  function data

User · Answer

setRequestHeader  method of XMLHttpRequest object should be used  http   help dottoro com ljhcrlbv php

User · Answer

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  amp  amp  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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to http-headers

Examples related to httprequest