axios: Returning "Network Error" on unauthorized error (401)

Describe the issue

Axios request below is returning “Network Error”, on API’s unauthorized return.

The API is in Asp Net Core with Identity. Therefore, it is recognized that my API actually returns a 401, but my request callback is not allowing me to get this return code, so that I can handle this exception directly.

I understand that, of course, my axios request tried to connect to the server, however, the identity by default doesn’t even establish this connection in cases of unauthorized, it just returns the code 401, so I imagine that then axios returns this condition that there really was a “Network Error”, since that’s exactly what happened.

I would like an idea of how we can solve this.

This is the code for the request in question

axios.delete(userApi.deleteAsync, id, config).then((resp) => {
      dispatch(fetchData(getState().user.params))
      toast.success(resp.data.message)
      return resp.data.data
    }).catch((resp) => {

Environment

Axios Version [0.27.2]
Adapter [e.g. XHR/HTTP]
Browser [e.g. Chrome, Safari]
Browser Version [e.g. 22]
Node.js Version [16.16.0]
OS: [Win 10]
Additional Library Versions [React 18.1.0, Next 12.1.6]

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 5
Comments: 26

Most upvoted comments

If you’re using .NET API, you need to ensure that .UseAuthentication() is after .UseCors(), because it is a cors issue that breaks the pipeline before the authorization (where the step returns 401) .

If you want to make certain that the problems is the axios library, try to test a fetch() request direct from DevTools console. If the problems persists, is not axios problem, but a pipeline configuration problem on server side.

rodrigo-web-developer on Aug 20, 2023

I had this issue when making a request to a dotnet API. Noticed that UseCors() was at the bottom, moving to the top before all other middleware fixed the issue for me.

burt-tcc on May 18, 2023

I’m having the exact same error, when having a 401 error axios returns this error I checked the 401 error with the network inspector, any way to get these status from the error?

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:168:14)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "authorization": "some token",
            "Content-Type": "application/json",

        },
        "method": "get",
        "data": "null",
        "url": "/somePath",
        "baseURL": "someBaseUrl",
        "params": {
            "size": 500
        }
    },
    "code": "ERR_NETWORK",
    "status": null
}

sebas0811buitrago on Oct 6, 2022

Right. The browser usually informs you when domain issues occur, which in my case did not. So, wouldn’t it be ideal for axios to identify this cross-domain return and return a code better than 0? Of course, being certain that this is the same issue.

sigespweb22 on Sep 22, 2022