React native fetch() 403 status

Question

I have an API endpoint working good in postman with the bellow options

The above request can get 200 status and got a response. Now I am trying to implement the same API with React Native using fetch method.

      fetch('https://example.com/api/user/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Token':'xxxxxx-xxxx-xxxx-xxxx-xxxxx'
        },
        body: {
          "useremail": "testuser@example.com",
          "userpassword": "123456"
        },
      })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      }).catch((error) =>{
        console.error(error);
      });

The above code was not working and I am getting 403 status.

In postman you're sending raw data and in react-native you are sending json data — Karan Mehta, Jan 22 '20 at 06:47
The issue is related to https://stackoverflow.com/questions/46200756/header-keys-become-lowercase-when-interacting-with-api-react-native "Token" is treated as 'token' from react — Shijin TR, Jan 22 '20 at 09:11

Prakash Karena · Answer 1 · 2020-01-22T09:01:00.807

0

You are passing data without converting it to json will make problem here

  fetch('https://example.com/api/user/login', {
        method: 'POST',
        credentials : 'include',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'token':'xxxxxx-xxxx-xxxx-xxxx-xxxxx',
        },
        body: JSON.stringify({ // convert object to json 
          "useremail": "testuser@example.com",
          "userpassword": "123456"
        }) ,
      })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      }).catch((error) =>{
        console.error(error);
      });

edited Jan 22 '20 at 09:01

answered Jan 22 '20 at 07:03

Prakash Karena

2,525
1
7
16

I think the "Token" header is not sending by the code – Shijin TR Jan 22 '20 at 08:18
I found the reason for the issue. That is because "Token" is getting in the server as 'token' – Shijin TR Jan 22 '20 at 09:00
The issue is related to https://stackoverflow.com/questions/46200756/header-keys-become-lowercase-when-interacting-with-api-react-native "Token" is treated as 'token' from react. We request the API developers to change to accept "token" – Shijin TR Jan 22 '20 at 09:11

score 0 · Answer 2 · answered Jan 22 '20 at 07:03

0

Have you tried this

The easy way to implement this is to use this attribute to your AndroidManifest.xml where you allow all http for all requests:

android:usesCleartextTraffic="true"

feel free for doubts

answered Jan 22 '20 at 07:03

Gaurav Roy

11,175
3
24
45

The issue is related to https://stackoverflow.com/questions/46200756/header-keys-become-lowercase-when-interacting-with-api-react-native "Token" is treated as 'token' from react – Shijin TR Jan 22 '20 at 09:09

behzad · Answer 3 · 2020-01-22T09:19:38.877

HTTP 403 is a standard HTTP status code communicated to clients by an HTTP server to indicate that access to the requested (valid) URL by the client is Forbidden for some reason. The server understood the request, but will not fulfill it due to client related issues.

so for first step in your postman use a fake user password to see if you get 403 again , if you got, that means you have problem in your sending your react native data.

so you should focus on your sending request code then,

According to docs you can post like this

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

be sure that you are sending your user pass correctly and not missing anything like misspellings

hope this helps you.

React native fetch() 403 status

3 Answers3