У меня очень странное поведение в 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;
};



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Всего лишь предположение, но это может быть связано со старой ошибкой в 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-адресу, чтобы пропустить кеширование.