Access Control Request Headers is added to header in AJAX request with jQuery

Question

I would like to add a custom header to an AJAX POST request from jQuery   I have tried this      ajax       type   POST       url  url      headers             My-First-Header   first value            My-Second-Header   second value              OR       beforeSend  function xhr             xhr setRequestHeader  My-First-Header    first value             xhr setRequestHeader  My-Second-Header    second value                done function data         alert data         When I send this request and I watch with FireBug  I see this header       OPTIONS xxxx yyyy HTTP 1 1       Host  127 0 0 1 6666       User-Agent  Mozilla 5 0  Windows NT 6 1  WOW64  rv 11 0  Gecko 20100101 Firefox 11 0       Accept  text html application xhtml xml application xml q 0 9   q 0 8       Accept-Language  fr fr-fr q 0 8 en-us q 0 5 en q 0 3       Accept-Encoding  gzip  deflate       Connection  keep-alive       Origin  null       Access-Control-Request-Method  POST       Access-Control-Request-Headers  my-first-header my-second-header       Pragma  no-cache       Cache-Control  no-cache   Why do my custom headers go to Access-Control-Request-Headers       Access-Control-Request-Headers  my-first-header my-second-header   I was expecting a header values like this       My-First-Header  first value      My-Second-Header  second value   Is it possible

User · Answer

Try to use the rack-cors gem  And add the header field in your Ajax call

User · Answer

What you saw in Firefox was not the actual request  note that the HTTP method is OPTIONS  not POST   It was actually the  pre-flight  request that the browser makes to determine whether a cross-domain AJAX request should be allowed   http   www w3 org TR cors   The Access-Control-Request-Headers header in the pre-flight request includes the list of headers in the actual request   The server is then expected to report back whether these headers are supported in this context or not  before the browser submits the actual request

User · Answer

Because you send custom headers so your CORS request is not a simple request  so the browser first sends a preflight OPTIONS request to check that the server allows your request     If you turn on CORS on the server then your code will work  You can also use JavaScript fetch instead  here    x000D   x000D  let url  https   server test-cors org server enable true amp status 200 amp methods POST amp headers My-First-Header My-Second-Header   x000D   x000D   x000D    ajax   x000D      type   POST   x000D      url  url  x000D      headers    x000D           My-First-Header   first value   x000D           My-Second-Header   second value  x000D        x000D     done function data    x000D      alert data 0  request httpMethod     was send - open chrome console gt  network to see it    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D    Here is an example configuration which turns on CORS on nginx  nginx conf file     x000D   x000D  location     index  php        x000D         x000D      add header  Access-Control-Allow-Origin    http origin  always  x000D      add header  Access-Control-Allow-Credentials   true  always  x000D      if   request method   OPTIONS    x000D          add header  Access-Control-Allow-Origin    http origin     DO NOT remove THIS LINES  doubled with outside  if  above  x000D          add header  Access-Control-Allow-Credentials   true   x000D          add header  Access-Control-Max-Age  1728000    cache preflight value for 20 days x000D          add header  Access-Control-Allow-Methods   GET  POST  OPTIONS   x000D          add header  Access-Control-Allow-Headers   My-First-Header My-Second-Header Authorization Content-Type Accept Origin   x000D          add header  Content-Length  0  x000D          add header  Content-Type   text plain charset UTF-8   x000D          return 204  x000D        x000D    x000D   x000D   x000D    Here is an example configuration which turns on CORS on Apache   htaccess file    x000D   x000D    ------------------------------------------------------------------------------ x000D      Cross-domain Ajax requests                                                   x000D    ------------------------------------------------------------------------------ x000D   x000D    Enable cross-origin Ajax requests  x000D    http   code google com p html5security wiki CrossOriginRequestSecurity x000D    http   enable-cors org  x000D   x000D     lt IfModule mod headers c gt  x000D       Header set Access-Control-Allow-Origin     x000D     lt  IfModule gt  x000D   x000D   Header set Access-Control-Allow-Origin  http   example com 3000  x000D   Header always set Access-Control-Allow-Credentials  true  x000D   x000D  Header set Access-Control-Allow-Origin     x000D  Header always set Access-Control-Allow-Methods  POST  GET  OPTIONS  DELETE  PUT  x000D  Header always set Access-Control-Allow-Headers  My-First-Header My-Second-Header Authorization  content-type  csrf-token  x000D   x000D   x000D

User · Answer

Here is an example how to set a request header in a jQuery Ajax call     ajax     type   POST     beforeSend  function request        request setRequestHeader  Authority   authorizationToken          url   entities     data   json     escape JSON stringify createRequestObject      processData  false    success  function msg            results   append  The result      StringifyPretty msg

User · Answer

And that is why you can t create a bot with JavaScript  because your options are limited to what the browser allows you to do  You can t just order a browser that follows the  CORS policy  which most browsers follow  to send random requests to other origins and allow you to get the response that simply   Additionally  if you tried to edit some request headers manually  like origin-header from the developers tools that come with the browsers  the browser will refuse your edit and may send a preflight OPTIONS request

User · Answer

From client side  I cant solve this problem  From nodejs express side  you can use cors module to handle it  var express         require  express    var app             express    var bodyParser   require  body-parser    var cors   require  cors     var port   3000   var ip    127 0 0 1    app use    myapi              cors       with this row OPTIONS has handled           bodyParser text  type  text                 function  req  res  next        console log    n ----------------    req method    ------------------------             console log     prot   req protocol            console log     host   req get  host              console log     url   req originalUrl            console log     body   req body              console log     req   req        console log    ----------------    req method    ------------------------         next             app listen port  ip  function         console log  Listening to port       port          console log   dir     dirname     console log  The server is up and running at http     ip     port        Without cors   this OPTIONS has appears before POST   ----------------OPTIONS------------------------   prot http   host localhost 3000   url  myapi   body      ----------------OPTIONS------------------------   ----------------POST------------------------   prot http   host localhost 3000   url  myapi   body   lt SOAP-ENV Envelope    P-ENV Envelope gt   ----------------POST------------------------  The ajax call    ajax       type   POST       contentType   quot text xml  charset utf-8 quot      these does not works       beforeSend  function request             request setRequestHeader  Content-Type    text xml  charset utf-8            request setRequestHeader  Accept    application vnd realtime247 sct-giro-v1 cms            request setRequestHeader  Access-Control-Allow-Origin                 request setRequestHeader  Access-Control-Allow-Methods    POST  GET            request setRequestHeader  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type                   headers             Content-Type    text xml  charset utf-8            Accept    application vnd realtime247 sct-giro-v1 cms            Access-Control-Allow-Origin                 Access-Control-Allow-Methods    POST  GET            Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type               url   http   localhost 3000 myapi                    data          lt SOAP-ENV Envelope    P-ENV Envelope gt                        success  function  data           console log data documentElement innerHTML              error  function jqXHR  textStatus  err          console log  jqXHR   n   textStatus   n   err

User · Answer

This code below works for me  I always use only single quotes  and it works fine  I suggest you should use only single quotes or only double quotes  but not mixed up     ajax       url   YourRestEndPoint       headers             Authorization   Basic xxxxxxxxxxxxx            X-CSRF-TOKEN   xxxxxxxxxxxxxxxxxxxx            Content-Type   application json             method   POST       dataType   json       data  YourData      success  function data         console log  succes    data

[javascript] Access Control Request Headers, is added to header in AJAX request with jQuery

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to post

Examples related to http-headers