fetch(), comment faire une requête non mise en cache ?
P粉214176639
2023-08-27 18:47:06
<p>À l'aide de <code>fetch('somefile.json')</code>, puis-je demander un fichier au serveur au lieu du cache du navigateur ? </p>
<p>En d'autres termes, est-il possible de contourner le cache du navigateur en utilisant <code>fetch()</code> ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Plus facile à utiliser le mode cache :
// Download a resource with cache busting, to bypass the cache // completely. fetch("some.json", {cache: "no-store"}) .then(function(response) { /* consume the response */ }); // Download a resource with cache busting, but update the HTTP // cache with the downloaded resource. fetch("some.json", {cache: "reload"}) .then(function(response) { /* consume the response */ }); // Download a resource with cache busting when dealing with a // properly configured server that will send the correct ETag // and Date headers and properly handle If-Modified-Since and // If-None-Match request headers, therefore we can rely on the // validation to guarantee a fresh response. fetch("some.json", {cache: "no-cache"}) .then(function(response) { /* consume the response */ }); // Download a resource with economics in mind! Prefer a cached // albeit stale response to conserve as much bandwidth as possible. fetch("some.json", {cache: "force-cache"}) .then(function(response) { /* consume the response */ });Référence : https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/
Fetch peut obtenir un objet d'initialisation contenant de nombreux paramètres personnalisés que vous souhaiterez peut-être appliquer à votre demande, y compris une option appelée "En-têtes".
L'option "headers" prend un objet Header. Cet objet permet de configurer les en-têtes à ajouter à la requête.
En ajoutant pragma: no-cache et cache-control: no-cache dans les en-têtes, vous forcez le navigateur à vérifier le serveur pour voir si le fichier existe différemment de celui déjà dans le cache. Vous pouvez également utiliser cache-control: no-store car il ne permet tout simplement pas au navigateur et à tous les caches intermédiaires de stocker n'importe quelle version de la réponse renvoyée.
Voici un exemple de code :
var myImage = document.querySelector('img'); var myHeaders = new Headers(); myHeaders.append('pragma', 'no-cache'); myHeaders.append('cache-control', 'no-cache'); var myInit = { method: 'GET', headers: myHeaders, }; var myRequest = new Request('myImage.jpg'); fetch(myRequest, myInit) .then(function(response) { return response.blob(); }) .then(function(response) { var objectURL = URL.createObjectURL(response); myImage.src = objectURL; });<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6</title> </head> <body> <img src=""> </body> </html>