Fetch API yields "TypeError: failed to fetch"
11,935
From the Fetch API documentation:
A
fetch()
promise rejects with aTypeError
when a network error is encountered, although this usually means a permissions issue or similar.
One of these may be possible causes of "network error":
- DNS problems
- the server at
logoUrl
is unavailable / erroneous - Erroneous HTTP Headers causing server to ignore the request
- Browser aborted -- most likely due to navigation to another page before the fetch completes
Related videos on Youtube
Author by
Alexander Mills
Dev, Devops, soccer coach. https://www.github.com/oresoftware
Updated on July 19, 2022Comments
-
Alexander Mills almost 2 years
I am on Chrome, and I see this bizarre error:
TypeError: failed to fetch
(yes, that is the whole error message).
Here is the code that generated the error:
fetch(logoUrl, { method: 'put', headers: { 'Content-Type': 'image/jpeg', //encode credentials as base64 'Authorization': 'Basic ' + btoa('cdt-deployer:xyz'), }, body: imgFile // the file }).catch(function(err){ // the error appears here })
what am I supposed to do? I have no idea what's wrong. I am simply trying to send a binary image file to another server (I cannot see the server logs).
-
Alexander Mills almost 7 years@emil that is the full error dude. I stated that in the question.
-
sideshowbarker almost 7 yearsTo be clear: when you try it using curl or whatever, you’re also sending the image as the entity body, with a 'content-type: image/jpeg' header? (And as far as the possibility that the problem might be the image isn’t a jpeg image but instead a gif or png, even if that were the case I am pretty sure it wouldn’t be causing that TypeError to be thrown)
-
sideshowbarker almost 7 yearsAlso wonder if it might be choking on
imgFile
. You might consider updating your question to show howimgFile
is getting set
-
-
light over 3 years@KemalTezerDilsiz the code in the question was trying to fetch a resource at logoUrl. I presume it's the URL of the server.