最近在Vue開發中上傳圖片出現了一個報錯 -- 302，之前并未遇到過此問題，因此特意研究了一下。將研究結果分享出來，希望對于遇到相同問題的開發者有所幫助。

問題出現在使用axios接口上傳圖片時。上傳時，axios請求代碼如下：

axios({
url: '/api/uploadImage',
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
data: formData
}).then(res =>{
console.log(res);
}).catch(error =>{
console.log(error);
});

其中，'formData'是FormData對象，通過form表單獲取到的圖片，并將其攜帶在data字段中。而'/api/uploadImage'是上傳圖片的地址。

然而，上傳時出現報錯302。

首先查看控制臺Network面板，發現上傳圖片請求的status為302（重定向）。進一步查看Response Headers，發現有一條Location: /login的信息，說明被重定向到了登錄頁面。地址信息可以根據具體后端代碼情況而定。

考慮到問題可能出現在請求攔截器中，從而檢查攔截器代碼：

axios.interceptors.request.use(config =>{
if (localStorage.token) {
config.headers.Authorization = 'Bearer ' + localStorage.token;
}
return config;
}, error =>{
return Promise.reject(error);
});

發現這里將所有請求都添加上了token，不排除上傳圖片請求被攔截掉的可能性。因此，將上傳接口加入排除列表中：

axios.interceptors.request.use(config =>{
if (localStorage.token && !config.url.includes('/api/uploadImage')) {
config.headers.Authorization = 'Bearer ' + localStorage.token;
}
return config;
}, error =>{
return Promise.reject(error);
});

問題解決，上傳圖片成功。原因是上傳圖片請求被攔截并添加了token認證，導致被重定向到了登錄頁面。通過在攔截器中排除上傳圖片請求，避免了該問題的發生。