iOS QR Code Scan Results in Timeout Error, Works Fine on Android

I am working on a web application where users can scan a QR code to proceed with a transaction. The following JavaScript functions handle the QR code scan status and redirect the user based on the status:

postScanStatusAndRedirect() is called after a QR code is scanned.
checkQRStatus() periodically checks the status of the QR code.
The problem I’m encountering is that when scanning a QR code on iOS devices (Safari browser), I get a timeout error, and the following SweetAlert message is shown: “Your transaction time has expired. Please scan the QR code again”. However, the same code works perfectly fine on Android devices and other browsers.

async function postScanStatusAndRedirect() {
try {
const cacheBuster = new Date().getTime(); // Prevent caching with a unique query parameter

    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(‘Checking QR status…’);
const cacheBuster = new Date().getTime(); // Prevent caching with a unique query parameter

// 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));

}

What I’ve tried:

Added cache-busting parameters to the URL.
Used aggressive cache prevention headers (Cache-Control: no-store).
Cleared caches manually using the Cache API before each request.
Despite these efforts, the issue persists on iOS devices. Could someone please help me understand why this issue is happening only on iOS and suggest a solution to fix it?

Environment:

iOS devices (Safari browser)
Android devices (Chrome browser)
Any help or insights would be greatly appreciated!