edit2: suggests that I needn't worry because it doesn't happen when on a real device.

I'm using Axios in a VueJS hybrid (Cordova) app and am calling an API.

Axios is (correctly) doing a 'preflight' OPTIONS request before my GET/POST requests, but if the API returns a 503 at that point, my error handling code doesn't get called.

HTTP.post(url, data, {headers: {Authorization: 'Bearer ' + token.getAccessToken()}})
  .then(response => response)
  .catch(error => {
    // Not reached
  });

edit2: https://stackoverflow.com/a/37784969/107282 suggests that I needn't worry because it doesn't happen when on a real device.

I'm using Axios in a VueJS hybrid (Cordova) app and am calling an API.

Axios is (correctly) doing a 'preflight' OPTIONS request before my GET/POST requests, but if the API returns a 503 at that point, my error handling code doesn't get called.

HTTP.post(url, data, {headers: {Authorization: 'Bearer ' + token.getAccessToken()}})
  .then(response => response)
  .catch(error => {
    // Not reached
  });

How do I catch this error status?

edit: screenshot from chrome dev tools:

• javascript
• http
• vue.js
• http-headers
• axios

• What is the content of response in case of 503? Is response.data set? – Sergio Commented Oct 19, 2017 at 12:19
• I use axios and get 503 error handled by catch block on get operation, status is in error.response.status – Florian Ajir Commented Oct 19, 2017 at 14:47
• 1 Isn't 503 a network error? Network errors aren't handled by axios. – sandrooco Commented Oct 20, 2017 at 8:50
• 1 @jezmck, I believe the preflight OPTIONS request is sent by browser and not by your code, so I assume it cannot be handled by something which didn't even initiate it? – Tarun Lalwani Commented Oct 23, 2017 at 17:10
• 1 FYI: I just quickly tested this by setting up Fiddler to respond with 503 to any OPTIONS requests and was still able to catch the error with axios. What browser / axios version are you using? – Bragolgirith Commented Oct 25, 2017 at 17:48

3 Answers 3

I was able to reproduce the issue and the simplest fix I could find as below

axios.interceptors.response.use(null, (error) => {
    return Promise.reject(error);
});

As you can see in my tests I was able to get the error for and response for different scenarios

Axios' Network Error isn't much descriptive. To rethrow it in a better way, we can do something like this, to at least describe what request got the error, and what happened:

instance.interceptors.response.use(null, error => {
  if (error && error.message === 'Network Error') {
    throw new Error(`Potential network CORS preflight error at ${error.config.url}`);
  }
  throw error;
});

Who want know what type of http status is response with axios interceptor that is a example

    axios.interceptors.response.use(function (res) {
        return res;
      },
      (err) => {
        if(err.response.status == 403 || err.response.status == 503) {
            //handle error of type
            obj[err.response.status] ? obj[err.response.status]() : obj["default"]();
        }
        return Promise.reject(err);
      });

You can made a map with status callback for diferent behaviours.

const obj = {
    503 : () => console.log("Forbidden"),
    417 : () => console.log("is a teepot"),
    'default': () => console.log("Not handle it")
}