Getting TypeError failed to fetch when the request hasn t actually failed

Question

I m using fetch API within my React app  The application was deployed on a server and was working perfectly  I tested it multiple times  But  suddenly the application stopped working and I ve no clue why  The issue is when I send a get request  I m receiving a valid response from the server but also the fetch API is catching an exception and showing TypeError  failed to fetch  I didn t even make any changes to the code and it s the issue with all of the React components  I m getting a valid response   But also getting this error at the same time   fetch url   then res   gt  res json     then data   gt         do something with data     catch rejected   gt        console log rejected        When I remove credentials   quot include quot   it works on localhost  but not on the server  I tried every solution given on StackOverflow and GitHub  but it s just not working out for me

User · Accepted Answer

The issue could be with the response you are receiving from back-end  If it was working fine on the server then the problem could be with the response headers   Check the Access-Control-Allow-Origin  ACAO  in the response headers  Usually react s fetch API will throw fail to fetch even after receiving response when the response headers  ACAO and the origin of request won t match

User · Answer

Note that there is an unrelated issue in your code but that could bite you later  you should return res json    or you will not catch any error occurring in JSON parsing or your own function processing data   Back to your error  You cannot have a TypeError  failed to fetch with a successful request  You probably have another request  check your  network  panel to see all of them  that breaks and causes this error to be logged  Also  maybe check  Preserve log  to be sure the panel is not cleared by any indelicate redirection  Sometimes I happen to have a persistent  console  panel  and a cleared  network  panel that leads me to have error in console which is actually unrelated to the visible requests  You should check that   Or you  but that would be vicious  actually have a hardcoded console log  TypeError  failed to fetch   in your final  catch    and the error is in reality in your  then   but it s hard to believe

User · Answer

If your are invoking fetch on a localhost server  use non-SSL unless you have a valid certificate for localhost  fetch will fail on an invalid or self signed certificate especially on localhost

User · Answer

I have a similar problem and as I m newbie   here are some facts for somebody to comment   I m sending form data to Google sheet this way  scriptURL is https   script google com macros s AKfy     showSuccess   is showing a simple image    fetch scriptURL   method   POST   body  new FormData form     then response   gt  showSuccess     catch error   gt  alert  Error      error message     Executed in Edge my HTML doesn t show error and Network tab reports this 3 requests   Executed in Chrome my HTML  index htm  shows Failed to fetch error and Network tab reports this 2 requests   The value in the second column is blocked other  and there is also an error in Console tab   GET https   script googleusercontent com macros echo user content key D-ABF     net  ERR BLOCKED BY CLIENT  In order to suspend installed Chrome extensions  I executed my code in an Incognito window and there is no error message and Network tab reports this 2 requests    My guess is that something  extension   prevents Chrome to read the request s answer  the GET request is blocked

User · Answer

I know it s a relative old post but  I would like to share what worked for me  I ve simply input  quot http    quot  before  quot localhost quot  in the url  Hope it helps somebody

User · Answer

I understand this question might have a React-specific cause  but it shows up first in search results for  quot Typeerror  Failed to fetch quot  and I wanted to lay out all possible causes here  The Fetch spec lists times when you throw a TypeError from the Fetch API  https   fetch spec whatwg org  fetch-api Relevant passages as of January 2021 are below  These are excerpts from the text  4 6 HTTP-network fetch  To perform an HTTP-network fetch using request with an optional credentials flag  run these steps      16  Run these steps in parallel      2  If aborted  then      3  Otherwise  if stream is readable  error stream with a TypeError    To append a name value name value pair to a Headers object  headers   run these steps   Normalize value  If name is not a name or value is not a value  then throw a TypeError  If headers   s guard is  quot immutable quot   then throw a TypeError    Filling Headers object headers with a given object object   To fill a Headers object headers with a given object object  run these steps   If object is a sequence  then for each header in object   If header does not contain exactly two items  then throw a TypeError      Method steps sometimes throw TypeError   The delete name  method steps are   If name is not a name  then throw a TypeError  If this   s guard is  quot immutable quot   then throw a TypeError     The get name  method steps are   If name is not a name  then throw a TypeError  Return the result of getting name from this   s header list     The has name  method steps are   If name is not a name  then throw a TypeError     The set name  value  method steps are   Normalize value  If name is not a name or value is not a value  then throw a TypeError  If this   s guard is  quot immutable quot   then throw a TypeError     To extract a body and a Content-Type value from object  with an optional boolean keepalive  default false   run these steps      5  Switch on object      ReadableStream If keepalive is true  then throw a TypeError  If object is disturbed or locked  then throw a TypeError   In the section  quot Body mixin quot  if you are using FormData there are several ways to throw a TypeError  I haven t listed them here because it would make this answer very long  Relevant passages  https   fetch spec whatwg org  body-mixin In the section  quot Request Class quot  the new Request input  init  constructor is a minefield of potential TypeErrors   The new Request input  init  constructor steps are      6  If input is a string  then      2  If parsedURL is a failure  then throw a TypeError  3  IF parsedURL includes credentials  then throw a TypeError      11  If init  quot window quot   exists and is non-null  then throw a TypeError      15  If init  quot referrer quot  exists  then      1  Let referrer be init  quot referrer quot    2  If referrer is the empty string  then set request   s referrer to  quot no-referrer quot   3  Otherwise  1  Let parsedReferrer be the result of parsing referrer with baseURL  2  If parsedReferrer is failure  then throw a TypeError      18  If mode is  quot navigate quot   then throw a TypeError      23  If request s cache mode is  quot only-if-cached quot  and request s mode is not  quot same-origin quot    then throw a TypeError      27  If init  quot method quot   exists  then      2  If method is not a method or method is a forbidden method  then throw a TypeError      32  If this   s request   s mode is  quot no-cors quot   then  1  If this   s request   s method is not a CORS-safelisted method  then throw a TypeError      35  If either init  quot body quot   exists and is non-null or inputBody is non-null  and request   s method is GET or HEAD  then throw a TypeError      38  If body is non-null and body s source is null  then  1  If this   s request   s mode is neither  quot same-origin quot  nor  quot cors quot   then throw a TypeError      39  If inputBody is body and input is disturbed or locked  then throw a TypeError    The clone   method steps are   If this is disturbed or locked  then throw a TypeError    In the Response class   The new Response body  init  constructor steps are      2  If init  quot statusText quot   does not match the reason-phrase token production  then throw a TypeError      8  If body is non-null  then  1  If init  quot status quot   is a null body status  then throw a TypeError        The static redirect url  status  method steps are      2  If parsedURL is failure  then throw a TypeError    The clone   method steps are   If this is disturbed or locked  then throw a TypeError    In section  quot The Fetch method quot   The fetch input  init  method steps are      9  Run the following in parallel  To process response for response  run these substeps      3  If response is a network error  then reject p with a TypeError and terminate these substeps   In addition to these potential problems  there are some browser-specific behaviors which can throw a TypeError  For instance  if you set keepalive to true and have a payload  gt  64 KB you ll get a TypeError on Chrome  but the same request can work in Firefox  These behaviors aren t documented in the spec  but you can find information about them by Googling for limitations for each option you re setting in fetch

[javascript] Getting "TypeError: failed to fetch" when the request hasn't actually failed

Examples related to javascript

Examples related to get

Examples related to fetch-api