API request working in Postman but not in fetch() method of React Native app

Question

I am trying to do a fetch() method in my React Native app:

    return fetch(url, {
      method: method,
      headers: {
        'Accept': 'application/json',
        ...headers
      },
      body: body
    })

Here url is <IP address>:<port>/api/token

method is 'POST'

headers is {Content-Type: "application/x-www-form-urlencoded"}

and body is

grant_type=password&username=<username>&password=<password>&pushtoken=&primaryhost=<primary host IP>&primaryport=<primary host port>&secondaryhost=<secondary host IP>&secondaryport=<secondary host port>&osscustomer=103&deviceid=<device ID>&version=1.0&osversion=9&deviceversion=1.0

When I use these values in a Postman request, it works fine, but when I run the fetch() method in my React Native app, it gives the error e = TypeError: Network request failed at XMLHttpRequest.xhr.onerror.

Does anyone know why this might be?

Potentially a CORS/same origin issue? Postman won't respect those, while the browser will. Are you calling out to an API with a different hostname? — ben
– ben, Commented Feb 2, 2020 at 4:55
Sorry, I don't know what CORS/same origin is. And with the hostname, do you mean the URL? I'm using the same URL in both cases. — gkeenley
– gkeenley, Commented Feb 2, 2020 at 4:58
Sites are only supposed to talk to things on their same hostname (which is the URL without the path, in your case ipaddress:port), and if you want to talk to other things then you need to have the right CORS headers. Sounds like that isn't your issue though — ben
– ben, Commented Feb 2, 2020 at 5:00
My React Native app is running on a device, so it has its own IP address and port, and it's making fetch requests to an API on a server with its own IP address and port. Would CORS apply here? — gkeenley
– gkeenley, Commented Feb 2, 2020 at 5:15
Is the IP address for the app the same as the IP address for the server? If they're different, it could be CORS — ben
– ben, Commented Feb 2, 2020 at 5:28

Mohammad Oftadeh · Accepted Answer · 2020-02-02 05:29:37Z

1

change 'Accept' to Accept without single quites.

In the latest android versions http requests are not allowed by default. Take a look at this post for further information about allowing http request:How to allow all Network connection types HTTP and HTTPS in Android (9) Pie?

Use the following format:

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

Better to use axios for http/https requests:axios package

answered Feb 2, 2020 at 5:29

Mohammad Oftadeh

1,4451 gold badge7 silver badges12 bronze badges

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

8 Comments

gkeenley Over a year ago

@Mohammed I'm actually just using localhost:5000, so it's not making an HTTP request, right? And unfortunately removing the quotes from 'Accept' didn't change anything. Any other ideas I could try?

Mohammad Oftadeh Over a year ago

If you are using emulator then check whether internet is working or not in this emulation using browser. If not check this: Android emulator not able to access the internet

gkeenley Over a year ago

@Mohammed The internet is working. However, it's using Wifi, since it doesn't have a SIM in it. Any idea if this makes a difference or is ok?

Mohammad Oftadeh Over a year ago

edit the question and share your code (just fetch part)

gkeenley Over a year ago

Which code should I share other than what's in the original question?

|

Aamir Anwar · Accepted Answer · 2020-07-25 05:23:50Z

0

It's working fine for me. Try this it may help

const formData = new FormData();

formData.append('email', '[email protected]');
formData.append('password', '123456');

fetch("https://test.com/api/login", {
    method: 'post',
    body: formData
})
.then(res => res.json())
.then(
(result) => {
    console.log(result);
}).catch(err => {
    console.log(err);
})

answered Jul 25, 2020 at 5:23

Aamir Anwar

1731 silver badge6 bronze badges

Collectives™ on Stack Overflow

API request working in Postman but not in fetch() method of React Native app

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related