axios: Axios returns a generic "Network Error" even when the request got a response code

In my case, the CORS was blocking the frontend from acessing the backend. My Solution: Add this in the server-side:

                 Using npm, install 'cors':
                  npm i cors
                  
                  And add this lines to the code:

                  let cors = require("cors");
                  app.use(cors());

Hello to Everyone. I just want to let you know that after searching for a solution for two days, I was able to solve my error. Since the proxy was the source of the issue, I must configure a proxy in the package.json file, and I had to follow these instructions in the function that used Axios: try { await axios.post("user/login", formData).then((res) => { console.log(res.data); }); } catch (error) { console.log(error.response.data.message); } and in package.json file need to add a proxy: "proxy": "http://localhost:<SERVER_PORT_NUMBER>" for better understand check this documentation https://www.jamesqquick.com/blog/configure-proxy-in-react/

Axios returns a “Network Error” so, the one of the solution. I was found in my project, when using our app we need to switch on the mobile data then, try it again it will clear the ‘network error’.

any solution?

it’s CORS problem, once you resolve the CORS issue (for example install CORS Unblock extension plug in Chrome) it will retrieve the response code (for me it was 504)

@manugch @Miodec do you have any DNS ad blockers? I disabled my AdGuard and now it works fine. Can you check any any blockers/vpn?

I think it’s because the XHR spec doesn’t give any clue about the error, so I don’t think it can be fixed.

So, why does the console correctly show errors like ERR_FAILED 413 in this case, or CONNECTION_REFUSED or SSL_CERT_DATE_INVALID that I ran into in other cases? All of them give Network Error, but somehow show up correctly in the console…

Pretty sure using HTTP is not the best solution as its not supported in every browser (webpack replaces it with xhr)

EDIT: Right… Im assuming its related to the // Real errors are hidden from us by the browser comment…

Same issue. Any news? issue is coming from the only mobile browsers

I faced the same issue even after installing cors. I was able to fix it by making sure the cors code was above my route declaration. Code below. Before:

app.use("/api/messages", messagesRoutes); 
app.use(cors());

After:

app.use(cors()); 
app.use("/api/messages", messagesRoutes);

Hope this helps

Anyone got the solution to resolve it??

https://github.com/axios/axios/issues/4420#issue-1111893293

Probably the original issue posted here has to do with how CORS is handled by the browser. Looking at your network console the API endpoint is allowing your origin to make the request since OPTIONS request is successful and (taking a guess here) they are also succeeding with small file POSTS and not the bigger than threshold size ones.

That leads me to think that the content too large 413 is probably served by (

1. a reverse proxy like Nginx sitting in the middle ( which is where the response is originating from and not your API). Is it possible that you have not allowed the origin as a part of the error response(s) originating from Nginx. If yes chrome is probably disallowing the response from being read by your app. You can resolve this by providing Access-Control-Allow-Origin header as a part of the 413 response after which axios will receive the response ( you will need to have access to the reverse proxy or the likes in the middle to add this header).

OR

1. A middleware (in your API) that intercepts the request and does not set the ‘Access-Control-Allow-Origin’ headers appropriately while providing the error response. If not present chrome is probably disallowing the response from being read by your app (The browser/chrome receives the entire response as can be seen from the network console).

-I also see this error on some request:

• Althrough it return 200 response code:
• The console:
• My code:

I had exactly the same issue. Front-end I was using axios and back-end I was using .net core WebAPI. The solution was at the side of the back-end: app.UseCors((g)=>g.AllowAnyOrigin());

@manugch @Miodec do you have any DNS ad blockers? I disabled my AdGuard and now it works fine. Can you check any any blockers/vpn?

No Adblockers. I also see the error happening on visitor devices in our sentry logs, over 112 iOS devices by now who crashed with that unhandled “Network Error”. It affects only iOS devices as I said before Mac, iPhone, iPad mostly iOS/Safari 14.1.X