CODEWITHSUNDEEP
djangoreact-nativeunauthorized
MisterPy
MisterPy

Reputation: 21

react native 0.50.3 authorization header not sent

I am using react-native 0.50.3 to send token authenticated requests to my backend and unfortunately the 'authorization' part of the header is not send by the fetch.

My code is the following :

async componentDidMount() {

    var mytoken = await AsyncStorage.getItem('token');
    fetch('http://myserver:8000/home', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Origin': '',
        'Content-Type': 'application/json',
        'authorization': 'Bearer ' + mytoken
      }
    })
    .then((response) => response.json())
    .then((content) => {
      this.state.user = content.user;
    })
    .done();
}

And on my server side, the wireshark trace shows that the authorization is not in the request header :

Hypertext Transfer Protocol
    GET /home/ HTTP/1.1\r\n
    Host: 10.150.21.124:8000\r\n
    Content-Type: application/json\r\n
    Origin: \r\n
    Accept: application/json\r\n
    User-Agent: Expo/2.3.0.1012011 CFNetwork/893.14 Darwin/17.3.0\r\n
    Accept-Language: en-us\r\n
    Accept-Encoding: gzip, deflate\r\n
    Connection: keep-alive\r\n
    \r\n
    [Full request URI: http://10.150.21.124:8000/home/]
    [HTTP request 1/1]
    [Response in frame: 2326]

And of course I get a 401 unhautorized by the server.

My backend is a django API with CORS installed and CORS_ORIGIN_ALLOW_ALL = True and ALLOWED_HOSTS = ['*'].

The versions of my developments framework elements are the following :

One important update, the request I try to do with react-native works like a charm with postman. So the issue is not located on the server side.

Thank you for your help.

Alex.

Upvotes: 1

Views: 889

Answers (2)

dtmuturi
dtmuturi

Reputation: 91

Pooya's answer worked for me by adding the trailing slash on the request object. Strange because it worked on postman without the trailing slash hence the challenge in debugging. P.S i am also using the same stack, django, django REST framework (DRF) react native 

fetch('http://mywebsite.com/posts/', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

Upvotes: 1

Pooya Haratian
Pooya Haratian

Reputation: 785

try with trailing slash, in url address:

fetch('http://myserver:8000/home/', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Origin': '',
        'Content-Type': 'application/json',
        'authorization': 'Bearer ' + mytoken
      }
    })
    .then((response) => response.json())
    .then((content) => {
      this.state.user = content.user;
    })
    .done();

Upvotes: 1

Related Questions