JSON Parse error: Unrecognized token '?' in React Native

Question

I am working on React Native project and I try to transform datas from a server to JSON. I have already done it on other projects, so I know how it works, but this time I have an error : "JSON Parse error: Unrecognized token '<' ".

Here is my code :

fetch('https://app.fr', {
        method: 'POST',
        headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded',
        }),
    })
        .then((response) => response.json())

When I do response.text() instead, I get a string which is a correct JSON format. So I know the datas are not the problem.

fetch('https://app.fr', {
        method: 'POST',
        headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded',
        }),
    })
.then((response) => response.text())

After looking on forums, I found that the error could be that the server send me datas whith content-type "text/html" instead of "application/json". And yes, the server send me datas with content-type "text/html".

So I tried to change the content-type in the header:

 fetch('https://app.fr', {
        method: 'POST',
        headers: new Headers({
            'Content-Type': 'application/json',
        }),
    })
        .then((response) => response.json())

But I got that error : "JSON Parse error: Unrecognized token '?' "

So I thought it means that I need to change directly the content-type of datas on the server. But I can't do it because my client is using these datas for others projects.

Do yo know any possibility to transform to JSON datas with "text/html" content-type, without getting this kind of error?

Thanks !

Answer 1

In fact, I have some POST params to send. See below :

fetch('https://app.fr', {
    method: 'POST',
    headers: new Headers({
        'Content-Type': 'application/x-www-form-urlencoded',
    }),
    body: "tab_mobile=2",
})
 .then((response) => response.text())

If I set tab_mobile to 1, I get :

{"message":"ok","tests":[{"id":"54","token":"6604","id_test":"20","Nom_prenom":"Alain DUPONT","Titre_du_test":"SIT 212 situation 1","fait":"0"},{"id":"55","token":"5066","id_test":"21","Nom_prenom":"Alain DUPONT","Titre_du_test":"SIT 212 situation 2","fait":"0"}]} 

If I set tab_mobile to 2, I get :

 {"message":"error"}

I tried to parse these JSON with

JSON.parse(response.text())

If tab_mobile = 1, I get "JSON Parse error: Unrecognized token '<' ". But if I set tab_mobile to 2, I get no error. I can event do

alert(JSON.parse(response.text()).message)

and a windows open with "error" in it.

To conclude : When I get {"message":"error"}, I can parse it to JSON so I could think that datas sent are correct JSON format. But when I get the complete datas {"message":"ok", tests: [{...},{...}]}, I can't parse it to JSON.

Do you have some ideas of what I could do?

Answer 2

I have found the problem !

In the datas client send to me, there was an invisible first character. When I was rendering it on my phone I saw "{"message":"ok","testes":...} but when I log it in my console I saw that there was a strange character before the first "{". I deleted it with response.text().substring(1) and it works !

Thanks for your answers !