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, Feb 02 '20 at 04: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, Feb 02 '20 at 04: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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers. Sounds like that isn't your issue though — ben, Feb 02 '20 at 05: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, Feb 02 '20 at 05: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, Feb 02 '20 at 05:28
Someone solved this, you can try it: https://github.com/facebook/react-native/issues/23986#issuecomment-475783025 — Ahmet Zeybek, Feb 02 '20 at 05:28
@AhmetZeybek I tried his solution, unfortunately no difference — gkeenley, Feb 02 '20 at 22:24

score 1 · Answer 1 · answered Feb 02 '20 at 05:29

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 02 '20 at 05:29

Mohammad Oftadeh

1,410
1
4
11

@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? – gkeenley Feb 02 '20 at 22:48
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](https://stackoverflow.com/a/50165129/12462892) – Mohammad Oftadeh Feb 03 '20 at 05:34
@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? – gkeenley Feb 03 '20 at 05:44
edit the question and share your code (just fetch part) – Mohammad Oftadeh Feb 03 '20 at 05:52
Which code should I share other than what's in the original question? – gkeenley Feb 03 '20 at 06:34
You should fully share your code (just fetch part) in the question or sandbox or wherever you can – Mohammad Oftadeh Feb 03 '20 at 07:02
The fetch part is at the beginning of the original question. Am I missing something there? – gkeenley Feb 03 '20 at 07:25
please share your js file which write fetch statment in the question or sandbox or wherever you can for further review. – Mohammad Oftadeh Feb 03 '20 at 07:58

score 0 · Answer 2 · answered Jul 25 '20 at 05:23

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

const formData = new FormData();

formData.append('email', 'test@gmail.com');
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);
})

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

2 Answers2