問題發(fā)生場景:
? ? vue中前端請求用axios迄薄,請求成功會正常返回response梳侨,但是如果遇到需要驗證的API時需要token补履,如果token為空或者過期時瓷耙,會返回401蠢壹,并報跨域問題嗓违,但是在response的錯誤攔截中獲取的error.response是undefined。
問題根源:
? ? 問題根源其實與前端無關(guān)图贸,這里放一張圖片蹂季,圖片如下
? ??
當(dāng)我們發(fā)送一個請求到后端時,后端會先走filter層疏日,然后是Interceptor層偿洁,再就是控制層和切面層。之所以發(fā)生401時無法獲取到error.response是因為后端設(shè)置的cors允許跨域放在了切面層沟优,驗證token卻在攔截器層涕滋,當(dāng)我們發(fā)送一個過期的token的時候,首先會在攔截器層驗證token的有效性挠阁,如果無效則返回宾肺,這時候都還沒走到切面層設(shè)置的允許跨域,所以報了跨域問題侵俗,并且無法獲取error.response锨用。
解決方案:
? ? 后端需要把允許跨域設(shè)置在filter層就OK了。