Tag Archives: fetch

Error resolution of unexpected token in JSON at position 0

This error, or a similar error, can occur when you send an HTTP request, perhaps using a FETCH or other Ajax library.
then I will explain this is caused by what, how should we solve these problems
1.
These errors occur when you send a request to the server that returns a value that is not JSON but is parsed using JSON methods. The code that does this might look like this.
the fetch (‘/users’). Then (res = & gt; Res.json ())
The actual request is fine, it gets a return value, and the key to the problem is res.json(). Parse
json. parse( not a JSON string )>arse
json. parse( is not a JSON string );
json.parse () is essentially the same as res.json(), so the error cases are the same.
3. Invalid JSON
unexpected token o in JSON at position 1″
error prompt Some differences will vary depending on the server return
The symbol or location it prompts may be different, but the reason for it is the same: all the JSON your code parses is not really valid JSON.
> Here are some errors I’ve 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.
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:
first prints out the return value. If you’re using fetch, you can use res.text() instead of res.json() to get the string. Convert your code to something like this and look at the print to see what went wrong.
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 out their return values directly, which is why console.log must be inside the parentheses of.then.
5. Is it the server?
server returns HTML instead of JSON for several reasons:
The requested URL does not exist. The server returns the 404 page as HTML. You may have code errors in the request (like /user instead of /users), or errors in the server code.
When a new route is added, the server needs to be restarted. Get (‘ /users’,…) : app.get(‘ /users’…) Route, but without a restart, the server will not respond to the new route address.
client proxies are not set: If you are using a Webpack Dev server like the Create React App, you can set a proxies that point to the back-end server.
API root URL is /. If you are using proxies through Webpack or the Create React App, make sure your API route is not at the root level /. This will confuse the proxy server and you will get an HTML return instead of your API request. You can put a prefix like/API/in front of such as.
is a 404 page?(This may be a missing address or a mistyped code).
Is this the page for index.html?(It could be a missing address or an agent configuration error)
If everything looks good (new address, the server doesn’t restart), and then restart the front-end and back-end server, see if problem solved italic style * *
from: https://segmentfault.com/a/1190000017545154

React Native Network Request Failed solution

Today, when I was writing a demo of Network Request with React Native, the emulators kept telling me Network Request Failed, which was very annoying, baidu search for a long time did not find the answer I wanted, someone said on stackoverflow that this error only appeared in the development mode, but the production version would not appear, but it didn’t solve the problem at all. Another says: If you’re using FETCH to get data, and you’re using POST, notice that Headers has to add a request header. You can’t use the body when the request is for GET, you must include the body when it is for POST, and once you set the header, everything works fine. However, the fetch method used by me does not need to add any headers, so the problem of Network Request Failed has not been solved.
To prevent code errors, I directly copied the official sample code, as follows

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson.movies);
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

I put this code directly into the browser console console to run, and found that everything was ok, the console successfully output content. Then it could be the ios emulator.
Now that fecth API is problematic try using XMLHttpRequest instead, and the console output the Resource could not be loaded because the app Transport Security policy requires the use of a secure Connection, Baidu search only found that iOS9 introduced the new feature App Transport Security (ATS). The new feature requires that networks accessed within the App must use the HTTPS protocol, meaning that the Api interface must be HTTPS in the future. But my project USES HTTP, and I can’t immediately switch to HTTPS for transport.
Fortunately there is an alternative solution
1. Add NSAppTransportSecurity type Dictionary to info.plist.
2. Add nsallowsarbitraryoccurrence type Boolean under NSAppTransportSecurity, value set to YES
For details, please refer to this document for the resolution that iOS9 HTTP does not work properly