File download using AXIOS getting TypeError: Cannot use 'in' operator to search for 'validateStatus' in blob

Question

An issue occurs recently with a vue app when I try to download a CSV file using Axios, and I am not sure how to troubleshoot it.

downloadFile: function(res = "") {
    axios
        .get('/api/file/' + res, 'blob')
        .then(({ data }) => {
            const blob = new Blob([data], {type: 'text/csv'});
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = res;
            link.click();
        }).catch(error => console.error(error))
}

whenever <div v-on:click="downloadFile(filename)"> is clicked, following prints on console:

vue.min.js:6 TypeError: Cannot use 'in' operator to search for 'validateStatus' in blob
    at spread.js:25
    at Object.b [as forEach] (spread.js:25)
    at e.exports (spread.js:25)
    at r.<computed> [as get] (spread.js:25)
    at Function.get (spread.js:25)
    at a.downloadFile (eval at compile (http-vue-loader:161), <anonymous>:73:22)
    at click (eval at Ya (vue.min.js:6), <anonymous>:3:1183)
    at He (vue.min.js:6)
    at HTMLDivElement.n (vue.min.js:6)
    at HTMLDivElement.Yr.o._wrapper (vue.min.js:6)

Answer 1

Faced the same problem. Solved only by freezing axios version in package.json Steps:

1. delete package-lock.json
2. delete node_modules/ folder
3. edit package.json change "@ nuxtjs / axios": "^ 5.3.6" on "@ nuxtjs / axios": "5.3.6"
4. npm i

Answer 2

We got the same error on a delete.

Cannot use 'in' operator to search for 'validateStatus'

This was fixed by removing a redundant parameter that is now treated as config.

The Axios.delete method does not have a data parameter, and the validation was improved in 0.20.0

Answer 3

try using the javascript template literal syntax

axios.get(`/api/file/${res}`)

Anything sent in the axios request after the URL parameter will be treated as a config object