Like epascarello said, the server that hosts the resource needs to have CORS enabled. What you can do on the client side (and probably what you are thinking of) is set the mode of fetch to CORS (although this is the default setting I believe): fetch(request, {mode: ‘cors’}); However this still requires the server to … Read more
A few examples follow, going from basic through to adding transformations after the request and/or error handling: Basic: // Implementation code where T is the returned data shape function api<T>(url: string): Promise<T> { return fetch(url) .then(response => { if (!response.ok) { throw new Error(response.statusText) } return response.json<T>() }) } // Consumer api<{ title: string; message: … Read more
I met this error too but found out it is not related to the state of Response, the real problem is that you only can consume Response.json() once, if you are consuming it more than once, the error will happen. like below: fetch(‘http://localhost:3000/movies’).then(response =>{ console.log(response); if(response.ok){ console.log(response.json()); //first consume it in console.log return response.json(); //then … Read more
EDIT: syg answer is better. Just use downloadjs library. The answer I provided works well on Chrome, but on Firefox and IE you need some different variant of this code. It’s better to use library for that. I had similar problem (need to pass authorization header to download a file so this solution didn’t helped). … Read more
You’re setting the Content-Type to be multipart/form-data, but then using JSON.stringify on the body data, which returns application/json. You have a content type mismatch. You will need to encode your data as multipart/form-data instead of json. Usually multipart/form-data is used when uploading files, and is a bit more complicated than application/x-www-form-urlencoded (which is the default … Read more
For me, clean the state in the unmount of the component helped. const [state, setState] = useState({}); useEffect(() => { myFunction(); return () => { setState({}); // This worked for me }; }, []); const myFunction = () => { setState({ name: ‘Jhon’, surname: ‘Doe’, }) }
You could check for the content-type of the response, as shown in this MDN example: fetch(myRequest).then(response => { const contentType = response.headers.get(“content-type”); if (contentType && contentType.indexOf(“application/json”) !== -1) { return response.json().then(data => { // The response was a JSON object // Process your data as a JavaScript object }); } else { return response.text().then(text => … Read more
Many of the answers here are wrong. It seems people figure out what was causing status==0 in their particular case and then generalize that as the answer. Practically speaking, status==0 for a failed XmlHttpRequest should be considered an undefined error. The actual W3C spec defines the conditions for which zero is returned here: https://fetch.spec.whatwg.org/#concept-network-error As … Read more
Fetch promises only reject with a TypeError when a network error occurs. Since 4xx and 5xx responses aren’t network errors, there’s nothing to catch. You’ll need to throw an error yourself to use Promise#catch. A fetch Response conveniently supplies an ok , which tells you whether the request succeeded. Something like this should do the … Read more
Streams are starting to land in the web platform (https://jakearchibald.com/2016/streams-ftw/) but it’s still early days. Soon you’ll be able to provide a stream as the body of a request, but the open question is whether the consumption of that stream relates to bytes uploaded. Particular redirects can result in data being retransmitted to the new … Read more