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());

score 6 · Answer 1 · edited Mar 05 '19 at 06:57

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); });

score 4 · Answer 2 · answered May 18 '17 at 09:42

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': 'test@gmail.com',
    '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();

score 2 · Accepted Answer · edited May 23 '17 at 11:54

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 '17 at 11:54

Community

1
1

answered Jan 12 '17 at 06:36

Adam Patterson

958
7
13

score 1 · Answer 4 · edited Nov 10 '17 at 15:17

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) });

score 0 · Answer 5 · edited Jun 04 '17 at 13:25

0

server node.js?

npm i cors --save

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

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

edited Jun 04 '17 at 13:25

HDJEMAI

9,436
46
67
93

answered Jun 04 '17 at 13:06

Igor Ivanov

1

React Native - Fetch POST not working

5 Answers5