Ответ перехватчика Axios undefined
Я пытаюсь выйти из системы, как только он получит 401. Я использую axios для возврата данных из api.
Я поискал вокруг и нашел те же самые axios.interceptors.response
axios.interceptors.response.use(
response => response,
error => {
const {status} = error.response;
if (status === 401 ) {
store.dispatch('snackBar', snackbarObj)
}
return Promise.reject(error);
}
)
Похоже, моя ошибка. Ответ не определен. Я не уверен, что не так? Любые идеи?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы не получаете ответа на запрос, выполняемый с помощью Axios, поскольку браузер получил неавторизованный ответ 401 при выполнении предполетного запроса OPTION, что привело к Ошибка сети для запроса, который вы пытаетесь выполнить.
Это связано с тем, как работает CORS и как ваш бэкэнд обрабатывает запросы OPTION. Чтобы понять, как внутренний сервер должен обрабатывать предполетные запросы, важно понимать какова мотивация введения предполетных запросов.
Внутренний сервер не должен проверять аутентификацию по запросам OPTION, он должен подтверждать, что запрос направляется конечной точке, которая принимает междоменные запросы, и возвращать код успеха, если это так.
Затем браузер автоматически выполнит изначально задуманный запрос.
Таким образом, перехватчик Axios получит код ошибки 401, если пользователь больше не аутентифицирован.
Бесстыдная самореклама, я опубликовал простой плагин Axios под названием axios-middleware, который помогает абстрагироваться от использования перехватчиков Axios в более крупных приложениях. Он предлагает пример промежуточное ПО, которое автоматически обрабатывает неаутентифицированные запросы путем повторной попытки аутентификации перед повторной отправкой запроса.
@ ronoc4 Я обновил свой ответ дополнительной информацией о предполетных запросах.
Объект ответа будет неопределенным также, если предварительный запрос OPTION завершился успешно, но ответ для следующего GET/POST не содержит http-заголовок Access-Control-Allow-Origin.
В моем случае добавление заголовка Access-Control-Allow-Origin для ответа nginx 401 решает проблему.
Большое спасибо, это хорошее решение, я столкнулся с той же проблемой и был исправлен установкой Access-Control-Allow-Origin из экспресс.
это не лучшая практика, но я решаю это таким образом
axios.interceptors.response.use(
response => response,
error => {
if (typeof error.response === "undefined") {
// do somthing
}
return Promise.reject(error);
}
)
Бесполезно, потому что вся суть в том, что нам не хватает информации для //do something, если ответ undefined
Для тех, кто все еще борется с этим, используйте следующую обработку ошибок для лучшего контроля
if (error.response) {
// Request made and server responded
console.info(error.response.data);
console.info(error.response.status);
console.info(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
console.info(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.info('Error', error.message);
}
return Promise.reject(error);
Как Backend должен с этим справиться? Я отправляю токен в заголовках. Таким образом, в консоли браузера отображается то, что показано на изображении выше, а в ответе на вкладке сети указано «ошибка проверки jwt» - ronoc4 7 часов назад удалить