Sometime response.data is string instead of object

[huy-lv]

I don't know why but with the same api, sometime axios's response.data is string instead of object. See the below figure.

Context

• axios version: 0.18.0
• Environment: React native Expo SDK 29, window 10

[robmcguinness]

@huy-lv,

Is the content-type the same for both responses?

[huy-lv]

@robmcguinness Yes, it's application/json

[kim-knudsen]

I see the same behaviour. I found that in my case the API response would sometimes contain invalid JSON data, i.e. JSON.parse would throw. For some reason Axios seems to swallow this error, and ends up setting the invalid JSON string on the data property.

[nighttiger1990]

I got this problem, too. When i check response.data of problem case, some invalid JSON String like " data added to response, that make JSON.parse got error and return string.

[nighttiger1990]

I've checked with Axios, XMLHttpRequest, fetch
1./ Axios and XMLHttpRequest got same problem
2./ fetch work perfectly

[OpenGG]

I know there are some chars can lead to that problem, just need to be sure.
Could you capture the response and attach it as file?

[huy-lv]

@OpenGG sorry for late response, what you need here :D
https://1drv.ms/t/s!AnakDtCf8CG5hIgn2Hemy6zanFi50Q

[OpenGG]

@huy-lv Not what I'm expecting. Please save the response with curl, then attach the saved file by dropping it to this issue's reply area.

[OpenGG]

@huy-lv

Never mind, found it.
I pasted it on gist and tried loading with axios, can't see any error.

file: https://gist.github.com/OpenGG/ac72e79f9ef088e993213473116c0cd0
demo: https://codepen.io/OpenGG/pen/bxEqKL

[huy-lv]

i know, this problem does not happen all the time, it's about 1-2 times each 10 requests (the same API, same response)

[nighttiger1990]

@OpenGG it happen on React-Native. Web App work perfectly.

[OpenGG]

@nighttiger1990

Could you make an online demo on expo, and share it? This demo should make the same request with both Axios and XMLHttpRequest, to determine whether Axios or RN cause this issue.

[nighttiger1990]

@OpenGG can you give me your mail i'll send you api, i can't public that
https://github.com/nighttiger1990/axiosBug.git

[Druthi]

Any luck with this issue? I'm facing it too

[nighttiger1990]

@Druthi now im using 'fetch' instead of 'axios'

[iOSleep]

any update?

[luatnd]

This might not your case but in my case:
My API response string is not valid JSON, so axios cannot parse to JSON, then it return raw string instead.

[petercutting]

I have migrated my app (redux-saga,axios) to webpack4 and now response.data is a string instead of object. The migration changes I made are minimal to compile successfully
package.json
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "^3.6.1",
"webpack-dev-server": "^3.2.1"
"file-loader": "^3.0.1",

webpack-config.js
added mode: 'development', to module.exports
commented out colors: true, in devServer
commented out json-loader

[petercutting]

I ran JSON.parse(response.data) and the JSON is corrupt. (Unexpected token : in JSON at position 8181)

            "municipality": "ddrNote": ""      should be

            "municipality": "",
            "addrNote": ""

I compared with my pre migration webpack3 code where the JSON in response.data is OK (object). So the migrated code is managing to corrupt the JSON in response.data and that is why it is appearing as a string. So now the question is why is the JSON corrupt

[petercutting]

I solved the problem by downgrading to "webpack-dev-server": "3.1.10"

I have a devServer proxy which I guess is the cause of the response corruption for versions greater then 3.1.10

[nyilmaz]

@petercutting it is also a problem in production environment, haven't you observed?

[petercutting]

@nyilmaz my problem turned out to be caused by webpack-dev-server. webpack-dev-server would not be used in a production environment

[goodmorninggoaway]

@petercutting did you open an issue against webpack-dev-server? I couldn't find on.

[petercutting]

@goodmorninggoaway I dont remember. probably not

[bluenote10]

Irrespective of the webpack-dev-server issues, Axios shouldn't silently swallow JSON.parse exceptions, right?

I was just testing the robustness of an app by sending malformed JSON from the backend. The Axios request silently fails to decode the JSON. The header content-type still says "application/json", but response.data is the raw unparsed string, and my app crashes unexpectedly as a follow up.

It's quite crazy that a library with 60k stars has such a basic bug for half a year 😕

[nyilmaz]

Irrespective of the webpack-dev-server issues, Axios shouldn't silently swallow JSON.parse exceptions, right?

Parfectly valid

[matinzd]

Any update on this bug for react native!?

[ruimcf]

I found that this happens when the json response from the server is invalid, use a json validator like https://jsonlint.com/ to make sure that your json is correctly formatted

[fed135]

The error swallowing issue is being tracked, I will be closing this issue as it's essentially a duplicate of it.

Please reach out if you have any questions.

[nyilmaz]

@fed135 please link the relevant issue if any, thanks.

[kingeke]

Anyone solved this yet?, I'm using laravel as my API, so i logged my response before sending it to my app. The logged response is a valid JSON but the received response has the last "}" brace missing at the end, making it an invalid response. I don't know why this is behaving like this on my mobile app, cause for the frontend app it which uses axios too it works fine, tried on postman too, it works fine. any ideas or solutions pls??

[matinzd]

It happens when data gets too large :( I didnt have any problems since the data array was small!

[kingeke]

@matinzd I paginate my data, and only return 20

[kingeke]

@matinzd and also, my fronend app uses the same endpoint, and it doesn't experience that, only the mobile app with react native does sometimes

[bluenote10]

@fed135 Is this the right issue to track as a follow up? #61

[damzylee]

please my laravel api is coming out as a string alongside <!--, and looping through is like looking through a string

[damzylee]

I have finally found a solution to mine.
The data i was getting was === <!-- {"data":[{"id":2,"name":"beryl","email":"beryl@gmail.com","subscription_id":null,"number":"678904987653","user_id":null,"type":"okayna","country":"nigeria","state":"lagos","address":"maryland","image":null,"profile":null,"YOE":null,"created_at":null,"updated_at":null},{"id":1,"name":"mamacita","email":"mamacita@gmail.com","subscription_id":null,"number":"09876534567","user_id":null,"type":"bitch","country":"nigeria","state":"lagos","address":"gbagada","image":null,"profile":null,"YOE":null,"created_at":null,"updated_at":null}]}
app.js:1813

And I solved it by:

Axios.get(uri)
.then((response) => {
let ValidJson = '';
let myArray = '';
let moyo = response.data;
console.log(moyo);
ValidJson = moyo.replace("<!-- ","");
myArray = JSON.parse(ValidJson);
this.companies = myArray.data;
}).catch(error => console.log(error));
},

[marcosrd91]

I have the same error
:(

[arrlancore]

Got the same issue, after check in jsonlint.com I have the data with NaN which json cannot parsing it as below. So we need to ensure our backend sent the valid JSON data.

Error: Parse error on line 186:
...,	"position_name": NaN,	"group_name": 
----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'

[tuanhai2712]

Same error, who can fixed it :|

[zhming0]

☝️ I made a quick PR to address this issue. Hopefully it helps

[LMestre14]

Getting this issue in react-native with axios 0.19.2
Any update on the issue?

[mbish0p]

I got this same issue, I solved this problem make change in method of axios, if you had 'GET' method you can t send body because you can get this issue, to solve this you need to change to 'POST' and it will be working