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]

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:16

Top GitHub Comments

1reaction

sebas0811buitragocommented, Oct 6, 2022

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
}

1reaction

sigespweb22commented, Sep 22, 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.