When you send an HTTP request, perhaps using Fetch or other Ajax libraries, this error message or similar error may appear.
Next, I will explain why this is caused and how we should solve these problems
. 1. Causes of
these errors occur when you send a request to the server and the return value is not JSON but parsed by JSON. The code of the situation may be like this.
fetch('/users').then(res => res.json())
There is no problem with the actual request. It gets a return value. The key to the problem lies in res.json().
2. JSON.parse
uses another method JSON.parse to parse Json. The code may be like this
JSON.parse( 不是Json的字符串);
JSON.parse() is essentially the same as res.json(), so errors occur. The situation is the same.
3. Invalid JSON
"Unexpected token o in JSON at position 1" or other variables.
The error prompts some differences will vary with the server's return
The symbol or position it prompts may be different, but the reason for it is the same: all the parsed Jsons of your code are not really valid Jsons.
Here are some hints of the errors I have seen:
Unexpected token <in JSON at position 1
Unexpected token p in JSON at position 0
Unexpected token d in JSON at position 0
4. Solution
With fetch, you can use res.text() instead of res.json() to get the text string itself. Alter your code to read something like this, and check the console to see what's causing the problem: The
first thing to do is to print out the return value. If you use fetch, you can use res.text() instead of res.json() to get the string. Convert your code to the following, and use the printed content to see where the problem is.
fetch('/users')
// .then(res => res.json()) // comment this out for now
.then(res => res.text()) // convert to plain text
.then(text => console.log(text)) // then log it out
Note that methods like res.json() and res.text() are asynchronous. So you can't print their return values directly, which is why console.log must be in the parentheses of .then.
5. Is it because of the server?
The server returns HTML instead of JSON for several reasons:
The requested URL does not exist, and the server returns a 404 page in HTML. You may write wrong code when requesting (like /user written as /users), or wrong code on the server side.
When a new route is added, the server needs to be restarted. For example, when you are using a server written by Express, you just added a new route app.get('/users', …), but without restarting, the server will not respond to the new route address.
The client's proxy is not set: If you are using a Webpack dev server like Create React App, you can set a proxy to the backend server.
The root url of the API is /. If you are using a proxy through Webpack or Create React App, make sure that your API route is not at the root level /. This will confuse the proxy server and you will get an HTML instead of the return of your API request. You can add a prefix like /api/ if there is any.
Is it a 404 page? (It may be that the address is missing or the code is entered incorrectly).
Is this the index.html page? (Maybe the address is missing or the proxy is incorrectly configured)
If everything looks okay (the newly added address, the server did not restart), then restart the front-end and back-end servers to see if the problem is resolved. Italic style **
Reposted from: https://segmentfault.com/a/ 1190000017545154