Второй запрос не ожидает ответа первого запроса через API-интерфейс выборки в Firefox

У меня очень странное поведение в Firefox. Код, как вы можете видеть ниже. Как только возвращается ответ на первый запрос, заголовок пополняется и отправляется второй запрос. Но в логах сервера я вижу, что иногда запросы (второй запрос) не содержат токена (custombackendtoken). Как это может быть?

Воспроизвести проблему в Firefox можно, перезагрузив страницу. Во время загрузки страницы или во время выполнения первого запроса (путем нескольких попыток обновления).

Тот же сценарий в Chrome не происходит. Как второй запрос может перейти на серверную часть без заголовка custombackendtoken?

Я также проверил журналы сервера через дамп заголовка, и второй запрос, очевидно, отправлен браузером без ожидаемого заголовка. порядок такой: запрос1 вход запрос2 вход вывод запроса2 запрос1 вывод

Буду очень признателен, если у кого-нибудь возникнет идея.

export const fetchData = async (input: RequestInfo, options?: RequestInit, proxyPath?: string): Promise<Response> => {
  try {
    // first request
    const bearerToken = await getAuthToken(proxyPath);

    const reqOptions: RequestInit = options || {};
    reqOptions.headers = {
      ...reqOptions.headers,
      custombackendtoken: bearerToken,
    };

    // second request
    return await fetch(input, reqOptions);
  } catch (e) {
    console.error('Error.......', e);
    throw new Error(`Error....... Error: ${e}`);
  }
};


//getAuthToken
export default async (proxyPath: string): Promise<string> => {
  let token = await retrieveStoredToken(proxyPath);
  
  if (!token) {
    token = await createToken();
    if (!token) {
      throw new Error('Token can not be created!');
    }
    storeToken(proxyPath, token);
  }

  return token;
};

//retrieveStoredToken
const retrieveStoredToken = async (proxyPath: string): Promise<string | undefined> => {
  try {
    const response = await fetch(`${proxyPath}/token`, {
      credentials: 'same-origin',
    });

    return await response.json();
  } catch (e) {
    console.error('Error ..........', e);
  }
  return undefined;
};
Поведение ключевого слова "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) для оценки ваших знаний,...
0
0
69
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Всего лишь предположение, но это может быть связано со старой ошибкой в ​​Firefox, из-за которой прерванные запросы обрабатываются неправильно: https://bugzilla.mozilla.org/show_bug.cgi?id=1583815

К сожалению, эта ошибка существует уже много лет и, похоже, никогда не будет исправлена.

Если эта ошибка является причиной периодических проблем, которые вы видите в журналах вашего сервера, в этом обсуждении есть подсказка о том, как обойти эту проблему: https://github.com/Yaffle/EventSource/issues/130 #issuecomment - 535862539

По сути, вы должны предоставить сигнал AbortController при получении данных, использовать его для идентификации прерванного запроса, а затем обработать ситуацию:

 var controller = new AbortController();
  var signal = controller.signal;
  fetch('data:text/plain,test', {signal}).then(function(response) {
    if (signal?.aborted) {
      const reader = response.body.getReader();
      reader.cancel();
      // ... handle the aborted request, prevent the follow-up request etc.
    }
  })
Ответ принят как подходящий

Это была проблема с кешем Firefox. Во время обновления Firefox вызывает URL-адрес из кеша, а также отправляет запрос на сервер, на этом этапе 2 запроса называются асинхронными, поэтому запрос попадает в серверную часть без заголовка.

Такое поведение не наблюдалось в Chrome.

В качестве решения я добавил текущую временную метку к URL-адресу, чтобы пропустить кеширование.

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