React native - FETCH - Authorization header not working

Question

I made a server query via an app developed using react-native. I used fetch API and it turns out any query with authorization header not working. POST and GET method REQUESTS that don't expect Authorization headers at the server side works well. Some Queries at the server side are protected with authorization and when I make such queries including authorization header, I always get '401:unauthorized' error. But such queries works well with POSTMAN. Any suggestions here would be of great help.

getThingsApi() {

let uri = "https://example.com/things/";
let req = {
  method: "GET",
  credentials: "include",
  //mode: "no-cors",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    //'Access-Control-Request-Method': 'GET',
    //'Access-Control-Request-Headers': 'origin, x-requested-with',
    'Origin': '',
    'Host':'example.com',
    'authorization': 'Basic '+Base64.btoa('aaa:bbb'),
    'Cache-Control': 'no-cache'      
  }
};

fetch(uri, req)
  .then(response => response.json())
  .then(responseJson => {
  console.log("ResponseAxis::" + JSON.stringify(responseJson));
    console.log("ResponseAxis::" + JSON.stringify(responseJson));
    alert("ResponseAxis::" +JSON.stringify(responseJson));
  })
  .catch(error => {
    console.log("Error::" + JSON.stringify(error));
  });

}

Does your server expect/check CORS headers? In that case it is possible it rejects the empty 'Origin' header. Try removing it. — tvanlaerhoven
– tvanlaerhoven, Commented Sep 28, 2019 at 14:53
Still the same behaviour @tvanlaerhoven. If origin is the problem, it should'nt be returning any response for queries without Auth headers too, but thats not the case. API Queries without Auth headers works very well. — Yuvaraj Ravi
– Yuvaraj Ravi, Commented Sep 30, 2019 at 5:26
Issue is fixed. We used Fetch API and fetch Api converts all headers into lower-case(eg: authorization) and the server side expects upper-case starting letter(eg: Authorization). After changing the server side code to be case-insensitive, everything works fine. — Yuvaraj Ravi
– Yuvaraj Ravi, Commented Oct 9, 2019 at 9:11

Yuvaraj Ravi · Accepted Answer · 2019-10-09 09:12:56Z

1

Issue is fixed. We used Fetch API and fetch Api converts all headers into lower-case(eg: authorization) and the server side expects upper-case starting letter(eg: Authorization). After changing the server side code to be case-insensitive, everything works fine.

answered Oct 9, 2019 at 9:12

Yuvaraj Ravi

311 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React native - FETCH - Authorization header not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related