I tried to fetch some data from my API with Cross-Origin enabled but got this error.
Same thing with JSONPlaceholder (an online REST API for testing) using an example they provide :
Both requests (JSONPlaceholder and my API) work fine using Insomnia (a REST client), so my guess is that the problem is in my React application (16.13.1).
EDIT
After some tests, it seems that the error only occurs when calling the fetch function from a <form>, here are some details :
I tried to fetch some data from my API with Cross-Origin enabled but got this error.
Same thing with JSONPlaceholder (an online REST API for testing) using an example they provide :
Both requests (JSONPlaceholder and my API) work fine using Insomnia (a REST client), so my guess is that the problem is in my React application (16.13.1).
EDIT
After some tests, it seems that the error only occurs when calling the fetch function from a <form>, here are some details :
Share
Improve this question
edited Jun 20, 2020 at 9:12
CommunityBot111 silver badge
asked Apr 9, 2020 at 11:46
adxladxl89911 gold badge1010 silver badges2121 bronze badges6
1could you provide the full error you got? Or was it just the "TypeError: NetworkError"?
– Adam Jeliński
CommentedApr 9, 2020 at 11:49
Yes that's all, no details.
– adxl
CommentedApr 9, 2020 at 11:51
1You're not catching your error in any way. Try adding .catch(err => console.error(err)) so it prints the full error to the console, and then add the output to your question. It might add some more clarity.
– Phoenix1355
CommentedApr 9, 2020 at 12:01
3have you tried to prevent the default()? handleSubmit=(e)=>{e.preventDefault() ...etc}
– DcoderZ
CommentedApr 9, 2020 at 12:07
1@DcoderZ, yes that was the problem, thanks!
– adxl
CommentedApr 9, 2020 at 12:15
|
Show 1 more ment
1 Answer
1
Reset to default
7
I managed the reproduce your error. It seems like the network request is stopped when the page reloads. You could add a simple event.preventDefault to stop the reload until the fetch finishes and then reload the page.