TypeError: Failed to fetch in Reactjs

Question

I am using fetch to post data on backend. Every time, it is success but sometimes it caught error The data was posted but still error is shown.

I am fetching by code : - Compose.js

fetch(`${props.url}/addBalance`, {
                method: 'POST',
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(obj)
            })
            .then(resp => resp.json())
            .then(res =>{
                if(res) alert('Added Successfully');
                else alert('Failed,Try Again');
            }).catch(err=> {console.log(err);alert(err)});
        }

The CORS is enabled in backend and working (checked by POSTMAN).

Success:- Success Caught Error :- without ACAO with ACAO

I run the fetch command in console and it worked fine but not in my React js App

Catch is logging error but still data is being posting

Error:- TypeError: Failed to fetch

https://stackoverflow.com/questions/49343024/getting-typeerror-failed-to-fetch-when-the-request-hasnt-actually-failed — Leslie Alldridge, Dec 03 '20 at 05:48
I tried it but failed. I added ACAO in fetch and tried again but not resolved. I have attached error pic with response header with and without ACAO — Shyam Singhania, Dec 03 '20 at 06:06
No, The data is successfully post in DB. Fro backend I am sending response true if success and false if err — Shyam Singhania, Dec 05 '20 at 13:52

score 0 · Answer 1 · answered Dec 03 '20 at 05:51

0

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.

answered Dec 03 '20 at 05:51

Sherin Shaju

246
4
15

I had tried both, with ACAO and without it too. I attached error pic of both showing response header. – Shyam Singhania Dec 03 '20 at 06:07

score 0 · Answer 2 · answered Dec 03 '20 at 06:01

0

Add Allow CORS: Access-Control-Allow-Origin extension to your chrome or browser then enable it and check the reponse after that

answered Dec 03 '20 at 06:01

Praveen kumar

55
6

I enabled and tested. It passed but issue is still there – Shyam Singhania Dec 03 '20 at 06:29

score 0 · Answer 3 · answered Dec 11 '20 at 18:09

0

I was using Form to take the input from user due to which before fetching, page was reloaded and it showed 'failed to Fetch' and status was shown "Cancelled" in Chrome developer tools. To fix this I used Div tag.

answered Dec 11 '20 at 18:09

Shyam Singhania

1
1
2

TypeError: Failed to fetch in Reactjs

3 Answers3