Axios promise in VUE failed with Cannot read property 'toUpperCase' of undefined

Question

In my SPA made in VUE I'm setting my Axios repository (or Api file) but I'm getting trouble using interceptors.

Basically, if the jwtoken is expired or missing the interceptor works and I see in the debug the 401 error and I see in network debug the attempt to the api server.

The issue is when I got a valid jwtoken. In this case I have no attempt in network window and the error:

TypeError: Cannot read property 'toUpperCase' of undefined
at dispatchXhrRequest (app.js:57825)
at new Promise (<anonymous>)
at xhrAdapter (app.js:57808)
at dispatchRequest (app.js:58416)

This should mean a promise error and maybe a config error, but I need fresh eyes to fix...

This is the request code having promise:

const headers = {
    'X-CSRF-TOKEN': csrfToken,
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
};

client.interceptors.request.use(
    config => {
        if (!token) {
            return config;
        }

        const newConfig = {
            baseURL,
            withCredentials: false,
            headers: headers
        };
        return newConfig;
    },
    e => Promise.reject(e)

);

skirtle skirtle · Accepted Answer · 2019-08-28T10:50:04

The stack trace suggests the problem is in dispatchXhrRequest. There's a call to toUpperCase here:

https://github.com/axios/axios/blob/2ee3b482456cd2a09ccbd3a4b0c20f3d0c5a5644/lib/adapters/xhr.js#L28

So it looks like you're missing config.method.

My guess would be that you need to copy the old config into your new config so you get all the other options, such as method:

const newConfig = {
  ...config,
  baseURL,
  withCredentials: false,
  headers: headers
};

Axios promise in VUE failed with Cannot read property 'toUpperCase' of undefined

1 Answers