React Native fetch, unexpected token

Question

I'm trying to call a simple REST service with fetch api in React Native. I'm running the app on Android.

When I call await response.json() I get

Unexpected token � in JSON at position 0

, I tried also with await response.text(), and I get this text as result:

��Mn�0��B�[C�bn�u��?@�+�bLR�ҌBR.� ��H�ծ�͛�#?>�g��t�%{��Z��؄u�>fs0]��H��'&��u�Z}��y�Z��2��i�d�G�>��R��6LL{j�j�7\��d��L.��gٲXv�Lf��g�%T�~�\z�U8E܀��ڭ�c��@[G�;�T��{�*�9�)��a½ ��0�组V:ϒ��/�K��3�ݝ��W: c�^UV@�B�7�@�v �+WG��@YL�|Ġ>q�=@�J}�3=��Q�]Հup^E�0 ^d'Ա �^��b�.��2,м��g2��R<��_rpV:!��<��^>��{�e�#7m��nA�;n��l�o�u��kW��r��

This is the code I'm using:

export function fetchMenu() {
  return async(dispatch) => {
    try {
      dispatch(menuRequest(true));
      console.log(Institucion.aplent);
      var response = await fetch('http://<page_url>/api/moviles/personalizacion', {
        compress: true,
        headers: {
          'aplentId' : Institucion.aplent,
          'Accept-Encoding' : 'gzip,deflate'
        }
      });
      console.log(response);
      if(!response.ok) throw Error(response.statusText);
      var data = await response.json();
      console.log('Data:', data);
      dispatch(menuSuccess(data));
    }
    catch(ex) {
      console.log(ex);
      dispatch(menuFailure(ex));
    }
  };
}

Note: I've changed the url to for security reasons, but I have the correct url in code.

I've tried with and without the Accept-Encoding header, the same result.

EDIT

If I disable deflate compression inside my REST API (on the server) it works ok, doesn't fetch support deflate compression?

You are receiving HTML or XML instead JSON. Have you checked that service you are calling gives back a JSON response? — Dez
– Dez, Commented Apr 7, 2017 at 14:04
Yes. it does, it only return JSON, no other format, I tested it in postman, and return what I expect — Escobar5
– Escobar5, Commented Apr 7, 2017 at 14:44

Dez · Accepted Answer · 2017-04-07 14:51:05Z

2

Add these headers to the fetch call to ensure you receive JSON:

 'Content-Type': 'application/json',
  'Accept': 'application/json',

answered Apr 7, 2017 at 14:51

Dez

5,8878 gold badges47 silver badges53 bronze badges

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

1 Comment

Escobar5 Over a year ago

Tried with those, same thing

coder hacker · Accepted Answer · 2017-04-07 14:53:47Z

0

I would suggest seeing if it works without explicitly setting compression.

If you don't set the Accept-encoding header, react native should automatically zip and unzip it. So probably let it handle it. Instead try changing it to Accept header

export function fetchMenu() {
  return async(dispatch) => {
    try {
      dispatch(menuRequest(true));
      console.log(Institucion.aplent);
      var response = await fetch('http://<page_url>/api/moviles/personalizacion', {
        headers: {
          'aplentId' : Institucion.aplent,
          'Accept' : 'application/json'
        }
      });
      console.log(response);
      if(!response.ok) throw Error(response.statusText);
      var data = await response.json();
      console.log('Data:', data);
      dispatch(menuSuccess(data));
    }
    catch(ex) {
      console.log(ex);
      dispatch(menuFailure(ex));
    }
  };
}

answered Apr 7, 2017 at 14:53

coder hacker

4,8781 gold badge27 silver badges51 bronze badges

1 Comment

Escobar5 Over a year ago

Yes, I've tried without the 'Accept-encoding' header, and as it says in my post, with the same result

Escobar5 · Accepted Answer · 2017-04-21 15:07:20Z

0

It was a server side issue, I changed the compression algorithm of the api, and it works well

answered Apr 21, 2017 at 15:07

Escobar5

4,0839 gold badges41 silver badges62 bronze badges

2 Comments

RAHUL JOSHI Over a year ago

if it is not the problem, please remove the question then.

Escobar5 Over a year ago

I think this may be helpful for someone with the same problem.

Collectives™ on Stack Overflow

React Native fetch, unexpected token

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related