How can I read http errors when responseType is blob in Axios with VueJs?

You need to convert the response blob to json:

Axios({    url: 'xxxx',    method: 'GET',    responseType: 'blob',  })  .then((response) => {    //code to read the response and create object url with the blob and download the document  })  .catch((error) => {    if (      error.request.responseType === 'blob' &&      error.response.data instanceof Blob &&      error.response.data.type &&      error.response.data.type.toLowerCase().indexOf('json') != -1    ) {      new Promise((resolve, reject) => {          let reader = new FileReader();          reader.onload = () => {            error.response.data = JSON.parse(reader.result);            resolve(Promise.reject(error));          };          reader.onerror = () => {            reject(error);          };          reader.readAsText(error.response.data);        })        .then(err => {          // here your response comes          console.log(err.response.data)        })    };  });

For more info

The reason is that the response type is blob.
In case of error, the status code is available directly in your exception object. However, the response is a promise.

What you need to do is:

.catch((error) => {    let statusCode = error.response.status    let responseObj = await error.response.data.text();       :       :

For more details you can read documentation.

I believe you might be using the error variable in your catch() incorrectly.

Axios passes an error object that has a response property that is where you will want to look for your error or message.

https://github.com/axios/axios#handling-errors

On a side note if you can catch the error server side you could try setting the Content-type header to text/plain. Using either header('Content-Type: plain/text') or Laravel's Response Methods