web-dev-qa-db-fra.com

ReactJS: IE11 ne fait pas de nouvelle demande HTTP, en utilisant des données mises en cache

Je rencontre des problèmes dans mon React application on IE11 où l'interface utilisateur ne frappe pas les services d'arrière-plan pour chaque nouvelle demande et renvoie la réponse à partir des données de cache. L'application fonctionne bien sur Chrome.

Dans le cas de IE les services se terminent par le code: 304 au lieu de 200. PFB les en-têtes de requête:

Accept  application/json,*/*
Request GET /services/v0/search/?uid=12900 HTTP/1.1
Content-Type    application/json
Cache-Control   no-cache

PFB les en-têtes de réponse obtenus sur IE:

Response    HTTP/1.1 304 Not Modified
x-frame-options DENY
x-xss-protection    1; mode=block
x-content-type-options  nosniff

Tout indice, quelle pourrait être la raison derrière IE rendre un tel comportement? TIA

reactjshttpinternet-explorerinternet-explorer-11cache-control
8
Vishal Gulati

Vous pouvez essayer d'ajouter l'en-tête "Pragma":

headers: { Pragma: 'no-cache'}

également mentionné ici: Axios appelé une seule fois dans la fonction auto-invoquante (Internet Explorer)

24
Daniel Andrei

De docs

Vérifiez cet en-tête dans votre demande http:

Contrôle du cache:

no-cache: Force les caches à soumettre la demande au serveur Origin pour validation avant de libérer une copie mise en cache

no-store: Le cache ne doit rien stocker sur la demande du client ou la réponse du serveur.

must-revalidate (Revalidation and reloading):

Le cache doit vérifier l'état des ressources périmées avant de l'utiliser et celles expirées ne doivent pas être utilisées

Expires: 0 -la ressource est déjà expirée

1
RIYAJ KHAN

Si les solutions côté client ne fonctionnent pas en dernier recours, vous pouvez essayer de définir les en-têtes côté serveur. Si vous utilisiez node et express, vous pourriez écrire un middleware qui ajouterait pour vous les en-têtes des routes souhaitées, qui pourrait ressembler à ceci:

function cacheMiddleware(req, res, next) {
    // Should work for detecting IE8+
    if (req.headers['user-agent'].includes('Trident')) {
        res.set({
            'Cache-Control': 'no-store, no-cache, must-revalidate',
            Pragma: 'no-cache',
            Expires: new Date('01.01.2000'),
        });
    }
    next();
}

router.get('/', cacheMiddleware, (req, res) => res.send('content'))

Idée pour la solution de lien

1
xab

Je viens de rencontrer le même problème où IE11 ignore simplement la demande get au serveur principal. Le moyen rapide que j'ai trouvé pour corriger est de passer un paramètre inutile avec la demande get, dans notre cas, un horodatage.

const t = Date.now(); 
axios.get(`${API_DOMAIN}/api/bookingep/find?c=${t}`);

Parce que chaque fois que l'horodatage est différent, le ie11 envoie la requête get comme prévu.

1
Isaac Guan