VUE 中的 Axios 承諾失敗，無法讀取未定義的屬性“toUpperCase” (Axios promise in VUE failed with Cannot read property 'toUpperCase' of undefined)

問題描述

VUE 中的 Axios 承諾失敗，無法讀取未定義的屬性“toUpperCase” (Axios promise in VUE failed with Cannot read property 'toUpperCase' of undefined)

在我用 VUE 製作的 SPA 中，我正在設置我的 Axios 存儲庫（或 Api 文件），但我在使用攔截器時遇到了麻煩。

基本上，如果 jwtoken 已過期或缺少攔截器，並且我在調試中看到了 401 錯誤，在網絡調試中看到了對 api 服務器的嘗試。

問題是當我得到一個有效的 jwtoken 時。在這種情況下，我沒有嘗試在網絡窗口中出現錯誤：

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)

這應該意味著一個承諾錯誤，也可能是一個配置錯誤，但我需要新的眼睛來修復.. .

這是具有承諾的請求代碼：

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)

);

參考解法

方法 1:

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
};

(by Uncoke、skirtle)

參考文件

1. Axios promise in VUE failed with Cannot read property 'toUpperCase' of undefined (CC BY‑SA 2.5/3.0/4.0)