Повторный запрос Axios забывает заголовки

У меня есть перехватчик запросов axios, который добавляет авторизацию носителя через токен доступа. У меня также есть перехватчик ответов, который перехватывает ответы с истекшим сроком действия токена, получает новый токен через механизм обновления и повторяет исходный запрос. Кажется, что это должно работать, за исключением случаев, когда исходный запрос повторяется, кажется, что он потерял все свои заголовки. Это сбивает с толку мой бэкэнд API, так как он ожидает Content-Type (который был в исходном запросе).

Примечание. Я знаком с большим количеством вопросов о том, почему axios не учитывает пользовательский заголовок Content-Type. Это не моя проблема - я ее не устанавливаю - axios отлично справляется с определением этого самостоятельно. Меня просто смущает, почему заголовок Content-Type, который axios устанавливает сам, удаляется при повторной отправке исходного запроса.

Соответствующий код:

const api = axios.create({
  baseURL: "https://www.mycoolapi.com",
  timeout: 5000,
  withCredentials: true,
});

api.interceptors.request.use((config) => {
    // Add the auth header (not messing with any other headers)
    config.headers!.Authorization = `Bearer ${accessToken}`;
    return config;
  }, (error) => Promise.reject(error));

api.interceptors.response.use((response) => response,
  async (error) => {
    if (error.response.status == 401 && refreshToken && !error.config._isRetry) {
      // Token expired? Refresh, then retry the original request
      error.config._isRetry = true;
      await refreshLogIn();
      return api(error.config);
    }
  
    throw error;
  });

async function refreshLogIn() {
  // Use the refresh token to get a new token pair
  const response = await api.post( "/token",
    new URLSearchParams({
      grant_type: "refresh_token",
      refresh_token: refreshToken,
    })
  );

  accessToken = response.data["access_token"];
  refreshToken = response.data["refresh_token"];
}

Если я поставлю точку останова на return api(error.config) в перехватчике ответа и проверю исходный запрос (который находится в error.config), я получу следующие заголовки (напоминаю, я добавил только заголовок Authorization, остальные являются значениями по умолчанию axios или вычисляются из запроса) :

Если я затем перейду к перехватчику запросов, где исходный ответ повторяется, вместо этого я получаю следующие заголовки:

Content-Type был удален вместе с тем, что было в Symbol(defaults) (что бы это ни было).

Что мне здесь не хватает?

Какую версию Axios вы используете?

Phil 13.10.2022 00:17

Я бы посоветовал вообще не использовать Axios v1.x. Вот актуальная проблема github.com/axios/axios/issues/5089

Phil 13.10.2022 00:36

1.0.0. Вот и все. Я наткнулся на эту проблему в своем гугле, но не прочитал дальше заголовка. Последняя версия перед 1.0.0 - 0.27.2... попробуй эту? Или он собирается сломать кучу других вещей?

josh2112 13.10.2022 02:34

IMO v0.27.2 — последняя стабильная версия Axios. v1.0.0 и более поздние версии полностью сломаны во многих отношениях.

Phil 13.10.2022 02:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как отметил @Phil в комментариях, это ошибка в axios >= 1.0.0. Я полагаю, что можно было бы откатиться до 0.27.2, но я просто переписал, используя старый добрый fetch. В любом случае, мой вариант использования был достаточно простым, и на одну зависимость меньше никогда не бывает плохо.

Другие вопросы по теме