React Native - Fetch POST not working

Question

I am having huge troubles getting my fetch POST calls to work on iOS. My standard Fetch calls work and the Fetch POST calls work fine on android but not iOS.

The error that comes up is "Possible Unhandled Promise Rejection (id: 0): Unexpected token < in JSON at position 0"

It actually saves the post data to my server but throws that error.

I tried debugging the network request using GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest; before the API call coupled with using CORS in my chrome debug tools. From there I can see that it is making two post calls one after the other. The first one has type "OPTIONS" while the second one has type "POST". It should probably be noted that the call works in the App while using CORS and the line of code above.

I'm very confused and have exhausted all avenues.

My code im using for refrence is as follows.

return fetch(url,{
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then((res) => res.json());

fedorqui · Accepted Answer · 2019-03-05 06:57:28Z

6

If JSON.stringify is not working, then try to use FormData.

import FormData from 'FormData';

var formData = new FormData();
formData.append('key1', 'value');
formData.append('key2', 'value');

let postData = {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data'
    },
    body: formData
}

fetch(api_url, postData)
.then((response) => response.json())
.then((responseJson) => { console.log('response:', responseJson); })
.catch((error) => { console.error(error); });

edited Mar 5, 2019 at 6:57

fedorqui

293k113 gold badges592 silver badges640 bronze badges

answered Sep 18, 2017 at 11:21

omprakash8080

1,39117 silver badges12 bronze badges

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

Comments

Vishal Dhaduk · Accepted Answer · 2017-05-18 09:42:27Z

You use the following code for POST request in react native easily. You need to only replace the parameter name and value and your URL only.

var details = {
    'userName': '[email protected]',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('http://identity.azurewebsites.net' + '/token', {
  method: 'POST',
  headers: {
   'Accept': 'application/json',
   'Content-Type': 'application/x-www-form-urlencoded'
 },
 body: formBody
 }).  
 .then((response) => response.json())
        .then((responseData) => {
            console.log("Response:",responseData);
         }).catch((error) => {
                Alert.alert('problem while adding data');
            })
        .done();

Community · Accepted Answer · 2017-05-23 11:54:43Z

2

I would guess the response you are receiving is in HTML. Try:

 console.warn(xhr.responseText)

Then look at the response.

Also, IOS requires HTTPS.

Edit: Possible duplicate: "SyntaxError: Unexpected token < in JSON at position 0" in React App

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jan 12, 2017 at 6:36

Adam Patterson

9587 silver badges13 bronze badges

Comments

Adinia · Accepted Answer · 2017-11-10 15:17:53Z

Here is an example with date that works for me!
The trick was the "=" equal and "&" sign and has to be in a string format in the body object. Find a way to create that string and pass it to the body.

====================================

fetch('/auth/newdate/', {
            method: 'POST',
            mode: 'cors',
            redirect: 'follow',
            body: "start="+start.toLocaleString()+"&end="+end.toLocaleString()+"",
            headers: new Headers({
                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
            })
        }).then(function(response) {
            /* handle response */
            if(response.ok) {
              response.json().then(function(json) {
                let releasedate = json;
                //sucess do something with places
                console.log(releasedate);
              });
            } else {
              console.log('Network failed with response ' + response.status + ': ' + response.statusText);
            }
        }).catch(function(resp){ console.log(resp) });

HDJEMAI · Accepted Answer · 2017-06-04 13:25:03Z

0

server node.js?

npm i cors --save

var cors = require('cors');
app.use(cors());

res.header("Access-Control-Allow-Origin: *");

edited Jun 4, 2017 at 13:25

HDJEMAI

9,84848 gold badges78 silver badges99 bronze badges

answered Jun 4, 2017 at 13:06

Igor Ivanov

1

Collectives™ on Stack Overflow

React Native - Fetch POST not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related