Authorization header not working in fetch - React Native

Question

I am making a request to an API that I have on my computer (192.168.1.132) with react native from my phone (in the same network):

fetch('http://192.168.1.132:8000/test', {
  method: 'GET',
  headers: { 'Authorization': 'Bearer 4uFPmkP5326DXcRuHDKjRRrmhdeIBJ'},
  credentials: 'same-origin'
  })
  .then((response) => response.json())
  .then((responseJson) => {
    console.log('RESPONSE: ' + JSON.stringify(responseJson))
  })

But I am sniffing the request and it has not the Authorization header (any other that I put will appear, but not Authorization). In Xcode I have enabled 'AllowArbitraryLoads'. So my API returns 401 (Unauthorized) because obviously there is no Authorization header. Why is it not included in my request?

Try this using an authorization header with fetch in react native — tarzen chugh
– tarzen chugh, Commented Mar 17, 2018 at 18:48
That looks right, it should work. I personally never used that credentials property though. — Noitidart
– Noitidart, Commented Mar 17, 2018 at 18:59
Try using credentials: 'include' instead. Unless your frontend JavaScript is also running from the origin http://192.168.1.132:8000, your code’s making a cross-origin request. But with credentials: 'same-origin' you’ve told the browser to only include credentials in same-origin requests, no cross-origin ones. The Authorization header (for HTTP authentication) is a type of credential fetch.spec.whatwg.org/#credentials, so the browser omits it unless (by using credentials: 'include'), you explicitly indicate you always want credentials included — even for cross-origin requests — sideshowbarker
– sideshowbarker, Commented Mar 17, 2018 at 22:12
By the way, you’ll need to make sure the http://192.168.1.132:8000/test endpoint allows unauthenticated OPTIONS requests — that is, without the Authorization header. Because including the Authorization header triggers your browser to automatically on its own first send a CORS preflight OPTIONS request developer.mozilla.org/en-US/docs/Web/HTTP/… but the browser always omits all credentials from that OPTIONS request. So if that http://192.168.1.132:8000/test endpoint requires the Authorization header in OPTIONS requests too, the preflight will fail. — sideshowbarker
– sideshowbarker, Commented Mar 17, 2018 at 22:21
And to be clear, just because your frontend JavaScript code is also running on a 192.168.1.132 server doesn’t make the request same-origin. It would only be same-origin if the port number of the server for your frontend code is the same as the port number of the server you’re sending the request to. So unless your frontend code is also running from the server on port 8000, then the request your code is making is a cross-origin request. — sideshowbarker
– sideshowbarker, Commented Mar 17, 2018 at 22:24

Ryan Dines · Accepted Answer · 2018-05-07 17:17:17Z

12

You need a trailing slash on your url for headers to attach. As pointed out in the comments, make credentials say 'include'. If your API attaches a CSRF token in the pre-flight, then it will include that cookie as well.

answered May 7, 2018 at 17:17

Ryan Dines

1,05711 silver badges18 bronze badges

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

5 Comments

Eddie Teixeira Over a year ago

The trailing slash was all I needed! This is crazy! I spent over two hours trying to figure this out. Thanks!!!!

René Morales Over a year ago

Why is the trailing slash necessary? Any resource to read more about it?

Esteban Contreras Over a year ago

i love you, i spent days, weeks i can't remember trying to fix this..

Noah Santacruz Over a year ago

I can attest to the power of this slash. It works! Note, I was only seeing this issue on React Native iOS. Android worked without the slash.

Kol4o100 Oct 28 at 11:39

I hate that this worked ....... (iOS)

Jeff Pal · Accepted Answer · 2018-10-24 12:44:34Z

1

First I was just using the following in my Node Express API:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authentication");
  next();
});

It didn't work fine from react app but it worked from Insomnia directly request, then I needed to add the following:

const cors = require('cors');
app.options('*', cors())

edited Oct 24, 2018 at 12:44

answered Oct 24, 2018 at 3:44

Jeff Pal

1,6811 gold badge21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Authorization header not working in fetch - React Native

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related