How to solve encoding problem of fetch response in React?

Question

I was using react native 0.48.3 and getting response from fetch request i don't see any encoding problem it resolves by itself the encoding problem because the content-type of my response is : application/json;charset=iso-8859-1 . Now i upgraded my react native app to 0.59.8 i don't know why fetch doesn't resolve encoding problem anymore althought it's the same code . I have just upgraded my app . Do you have any idea ? Here is my fetch code :

export const setDocumentListDataAsync = (k, action, server) => {
 return () => {
  fetch(defineUrlForDocumentList(action, server), {
    credentials: 'include',
    headers:{
      contentType: "application/json; charset=utf-8",
    }
  })
  .then(
  (response) => {
    var contentType = response.headers.get('content-type')
    console.warn(contentType)
      return response
    }
    ).then((response) => {
      return response.json()
    }).catch((err) => {
      console.log(err)
    })
  }
}

so server responses does not match that you expect? when you pass `Content-Type` in request you just define that for request, not response. — skyboyer, Jun 11 '19 at 08:52
^ when you set the header to `utf-8`, fetch probably expects the response to be `utf-8` and decodes incorrectly. — Avin Kavish, Jun 11 '19 at 08:57
yup . So how can i force it to convert response type to utf-8 ? And do you think that the version of react js affects the manner that works fetch ? — stuudd, Jun 11 '19 at 08:58
Not 100% sure what's going on, but you can try passing the response through an array buffer and decoding it with your own library. https://stackoverflow.com/questions/41412253/encoding-conversion-of-a-fetch-response — Avin Kavish, Jun 11 '19 at 09:21
Yeah, fetch uses whatwg-fetch v1 in 0.48 and whatwg-fetch v3 in the current master branch. — Avin Kavish, Jun 11 '19 at 09:28
trying the link gives me this error FileReader.readAsArrayBuffer is not implemented — stuudd, Jun 11 '19 at 12:03

score 1 · Answer 1 · answered Aug 11 '19 at 14:35

You can use iconv-lite to deal with the iso-8859-1 encoding. Since you need to fetch an ArrayBuffer and React Native doesn't support response.arrayBuffer() you can use the XMLHttpRequest API as a workaround.

Here is an example:

import iconv from 'iconv-lite';
import { Buffer } from 'buffer';

const fetchJSON = (url) => {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();

        request.onload = () => {
            if (request.status === 200) {
                resolve(JSON.parse(iconv.decode(Buffer.from(request.response), 'iso-8859-1')));
            } else {
                reject(new Error(request.statusText));
            }
        };
        request.onerror = () => reject(new Error(request.statusText));
        request.responseType = 'arraybuffer';

        request.open('GET', url);
        request.setRequestHeader('Content-type', 'application/json; charset=iso-8859-1');
        request.send();
    });
}

export const setDocumentListDataAsync = (k, action, server) => {
    return () => {
        return fetchJSON(defineUrlForDocumentList(action, server))
            .catch(error => console.log(error));
    }
}

You should also install the packages buffer and stream.

score 0 · Accepted Answer · answered Jun 11 '19 at 09:42

0

I think you have to do this :

export const setDocumentListDataAsync = (k, action, server) => {
 return () => {
  fetch(defineUrlForDocumentList(action, server), {
    credentials: 'include',
    headers:{
      contentType: "application/json; charset=utf-8",
    }
  })
  .then(
  (response) => {
    var contentType = response.headers.get('content-type')
    console.warn(contentType)
      return response.json()
    }
    ).then((myJson) => {
      console.log(JSON.stringify(myJson));
    }).catch((err) => {
      console.log(err)
    })
  }
}

answered Jun 11 '19 at 09:42

Mahdi

1,355
1
12
28

1

thank you mahdi but doesn't change the problem of encoding – stuudd Jun 11 '19 at 10:56
Suppose the server only supports iso-8859-1 encoding, no matter what; that code won't fix the problem. – Haroldo_OK Aug 06 '19 at 17:48

score -1 · Answer 3 · answered Jan 30 '22 at 14:07

-1

Might be an old question, but this issue can be easily solved using the arrayBuffer() function of the fetch() response. Had a similar issue, where the server returns data in ISO encoding. Fetch .text() automatically converts the response to UTF-8 and that leads to encoding issues.

Full solution described here: https://schneide.blog/2018/08/08/decoding-non-utf8-server-responses-using-the-fetch-api/

answered Jan 30 '22 at 14:07

Andre

131
1
14

This is not possible in react-native as arrayBuffer is not implemented. – DownloadPizza May 05 '22 at 07:53

How to solve encoding problem of fetch response in React?

3 Answers3