CODEWITHSUNDEEP
jqueryajaxcors
David Flores
David Flores

Reputation: 33

ajax GET for custom header not working [CORS, preflight]

I'm trying to get a custom header named X-Total-Pages when I do a GET ajax call. The call is going from a client to an API. The API has these headers allowed:

The ajax call is:

$.ajax({
  type: 'GET',
  url: URL,
  crossDomain: true,
  dataType: 'json',
  contentType: 'application/json; charset=utf-8',
  headers: {
    'X-PINGOTHER': 'pingpong',
    "Access-Control-Expose-Headers" : "X-Total-Pages",
    "Authorization": "Basic " + btoa(AuthStore.getUser().token + ":" + ''),
    'Access-Control-Request-Method' : 'GET',
    "Access-Control-Request-Headers": "X-Total-Pages",
    "Access-Control-Allow-Origin" : "localhost:3000",
  }
})
  .done((data, textStatus, jqXhr) => {
    console.log('waiting patients response: ', data);
    console.log(textStatus);
    console.log(jqXhr);
    console.log(jqXhr.getAllResponseHeaders());
    console.log(jqXhr.getResponseHeader('X-Total-Pages'));
  })
  .fail((jqXhr) => {
     ...
  });

The result of console.log(jqXhr.getAllResponseHeaders()); is:

Content-Type: application/json; charset=utf-8 Cache-Control: max-age=0, private, must-revalidate

And for console.log(jqXhr.getResponseHeader('X-Total-Pages')); is null

Can someone tell me what is the right way of getting X-Total-Pages please?

Upvotes: 3

Views: 1453

Answers (1)

carson
carson

Reputation: 193

The browser will send out an OPTIONS request first that checks to see what methods, headers, etc. are allowed.

In the network tab, what does the OPTIONS request that compliments this GET look like? Does it have an X-Total-Pages header?

MDN has good documentation around CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Upvotes: 1

Related Questions