Сканирование QR-кода на iOS приводит к ошибке тайм-аута, на Android работает нормально

Я работаю над веб-приложением, в котором пользователи могут сканировать QR-код, чтобы продолжить транзакцию. Следующие функции JavaScript обрабатывают статус сканирования QR-кода и перенаправляют пользователя в зависимости от статуса:

postScanStatusAndRedirect() вызывается после сканирования QR-кода. checkQRStatus() периодически проверяет статус QR-кода. Проблема, с которой я столкнулся, заключается в том, что при сканировании QR-кода на устройствах iOS (браузер Safari) возникает ошибка таймаута, и появляется следующее сообщение SweetAlert: "Время вашей транзакции истекло. Пожалуйста, отсканируйте QR-код еще раз". Однако тот же самый код прекрасно работает на устройствах Android и в других браузерах.

async-функция postScanStatusAndRedirect() { try { const cacheBuster = new Date().getTime(); // Предотвращение кэширования с помощью уникального параметра запроса

    const response = await fetch(`https://stg-api.goldatm.in/api/qrcode-status?cb=${cacheBuster}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Cache-Control': 'no-store' // More aggressive cache prevention
        },
        body: JSON.stringify({ status: 1 }),
        credentials: 'same-origin' // Include credentials if needed
    });

    if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
    }

    const data = await response.json();
    console.log('Scan status posted', data);

    setTimeout(() => {
        console.log('Redirecting to:', "{% url 'login' %}");
        window.location.href = "{% url 'login' %}";
    }, 100); // Adjust delay if needed
} catch (error) {
    console.error('Error posting scan status:', error);
    alert('An error occurred: ' + error.message);
}

}

async function checkQRStatus() { console.log('Проверка статуса QR...'); const cacheBuster = new Date().getTime(); // Предотвращение кэширования с помощью уникального параметра запроса

// Clear existing caches for the URL
if ('caches' in window) {
    const cacheNames = await caches.keys();
    for (const name of cacheNames) {
        await caches.delete(name);
    }
}

fetch(`https://stg-api.goldatm.in/api/qrcode-status?cb=${cacheBuster}`, {
    method: 'GET',
    headers: {
        'Cache-Control': 'no-store', // Prevent caching entirely
        'Pragma': 'no-cache'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('QR Status Data:', data);
    if (data.QRstatus.qrStatus === 2 && !alertShown) {
        console.log('QR status is false and alert has not been shown.');
        Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Your transaction time has expired. Please scan the QR code again",
            allowOutsideClick: false,
        }).then((result) => {
            console.log('Alert confirmed:', result.isConfirmed);
            if (result.isConfirmed) {
                window.location.href = "https://www.google.com/";
            }
        });
        alertShown = true;
    } else {
        console.log('QR status is not false or alert has already been shown.');
    }
})
.catch(error => console.error('Error checking QR status:', error));

}

Что я пробовал:

Добавляли в URL параметры, предотвращающие кэширование. Использовали агрессивные заголовки для предотвращения кэширования (Cache-Control: no-store). Очищали кэш вручную с помощью Cache API перед каждым запросом. Несмотря на все эти усилия, проблема сохраняется на устройствах iOS. Не мог бы кто-нибудь помочь мне понять, почему эта проблема возникает только на iOS, и предложить решение для ее устранения?

Окружение:

Устройства

iOS (браузер Safari) Устройства Android (браузер Chrome) Любая помощь или понимание будут очень признательны!

Вернуться на верх