Problème de mise en cache IE angulaire pour $ http

Tous les appels ajax envoyés depuis IE sont mis en cache par Angular et j'obtiens un 304 responsepour tous les appels suivants. Bien que la demande soit la même, la réponse ne sera pas la même dans mon cas. Je veux désactiver ce cache. J'ai essayé d'ajouter le cache attributeà $ http.get mais cela n'a toujours pas aidé. Comment résoudre ce problème?

Au lieu de désactiver la mise en cache pour chaque requête GET unique, je la désactive globalement dans $ httpProvider:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Vous pouvez soit ajouter une chaîne de requête unique (je crois que c'est ce que jQuery fait avec l'option cache: false) à la demande.

$http({
    url: '...',
    params: { 'foobar': new Date().getTime() }
})

Une solution peut-être meilleure est que si vous avez accès au serveur, vous pouvez vous assurer que les en-têtes nécessaires sont définis pour empêcher la mise en cache. Si vous utilisez ASP.NET MVC cette réponse, cela pourrait vous aider.

vous pouvez ajouter un intercepteur.

myModule.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('noCacheInterceptor');
}]).factory('noCacheInterceptor', function () {
            return {
                request: function (config) {
                    console.log(config.method);
                    console.log(config.url);
                    if(config.method=='GET'){
                        var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                        config.url = config.url+separator+'noCache=' + new Date().getTime();
                    }
                    console.log(config.method);
                    console.log(config.url);
                    return config;
               }
           };
    });

vous devez supprimer les lignes console.log après vérification.

J'ai simplement ajouté trois balises META dans index.html sur un projet angulaire et le problème de cache a été résolu sur IE.

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">

Dupliquer ma réponse dans un autre fil .

Pour Angular 2 et plus récent , la façon la plus simple d'ajouter des en- no-cachetêtes en remplaçant RequestOptions:

import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    headers = new Headers({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
    });
}

Et référencez-le dans votre module:

@NgModule({
    ...
    providers: [
        ...
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ]
})

La garantie que je travaillais était quelque chose dans ce sens:

myModule.config(['$httpProvider', function($httpProvider) {
    if (!$httpProvider.defaults.headers.common) {
        $httpProvider.defaults.headers.common = {};
    }
    $httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
    $httpProvider.defaults.headers.common.Pragma = "no-cache";
    $httpProvider.defaults.headers.common["If-Modified-Since"] = "Mon, 26 Jul 1997 05:00:00 GMT";
}]);

Je devais fusionner deux des solutions ci - dessus afin de garantir l'utilisation correcte pour toutes les méthodes, mais vous pouvez remplacer commonpar getou une autre méthode par exemple put, post, deletepour faire ce travail pour les cas différents.

Cette seule ligne m'a aidé (Angular 1.4.8):

$httpProvider.defaults.headers.common['Pragma'] = 'no-cache';

UPD: Le problème est qu'IE11 fait une mise en cache agressive. Lorsque je regardais Fiddler, j'ai remarqué qu'en mode F12, les requêtes envoyaient "Pragma = no-cache" et le point final était demandé à chaque fois que je visitais une page. Mais en mode normal, le point de terminaison n'a été demandé qu'une seule fois lors de ma première visite sur la page.

Pour éviter la mise en cache, une option consiste à donner une URL différente pour la même ressource ou les mêmes données. Pour générer une URL différente, vous pouvez ajouter une chaîne de requête aléatoire à la fin de l'URL. Cette technique fonctionne pour les requêtes JQuery, Angular ou autre type ajax.

myURL = myURL +"?random="+new Date().getTime();

Je le résout en ajoutant datetime comme un nombre aléatoire:

$http.get("/your_url?rnd="+new Date().getTime()).success(function(data, status, headers, config) {
    console.log('your get response is new!!!');
});

La solution ci-dessus fonctionnera (rendre l'url unique en ajoutant dans la chaîne de requête un nouveau paramètre) mais je préfère la solution proposée [ici]: une meilleure façon de prévenir le cache IE dans AngularJS?, qui gère cela au niveau du serveur car il n'est pas spécifique à IE. Je veux dire, si cette ressource ne doit pas être mise en cache, faites-le sur le serveur (cela n'a rien à voir avec le navigateur utilisé; c'est intrinsèque à la ressource).

Par exemple, en java avec JAX-RS, faites-le par programme pour JAX-RS v1 ou de manière déclinative pour JAX-RS v2.

Je suis sûr que tout le monde saura comment le faire

C'est un peu ancien mais: les solutions comme sont obsolètes. Laissez le serveur gérer le cache ou non le cache (dans la réponse). La seule façon de garantir l'absence de mise en cache (en pensant aux nouvelles versions en production) est de changer le fichier js ou css avec un numéro de version. Je fais cela avec webpack.

vous pouvez également essayer dans votre service de définir des en-têtes comme par exemple:

...
importer {Injectable} depuis "@ angular / core";
importer {HttpClient, HttpHeaders, HttpParams} depuis "@ angular / common / http";
...
 @Injectable ()
classe d'exportation MyService {

    en-têtes privés: HttpHeaders;


    constructeur (http privé: HttpClient ..) 
    {


        this.headers = nouveaux HttpHeaders ()
                    .append ("Content-Type", "application / json")
                    .append ("Accepter", "application / json")
                    .append ("LanguageCulture", this.headersLanguage)
                    .append ("Cache-Control", "no-cache")
                    .append ("Pragma", "no-cache")                   
    }
}
....

La solution correcte côté serveur: une meilleure façon de prévenir le cache IE dans AngularJS?

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
public ActionResult Get()
{
    // return your response
}

Ce problème est dû au problème de mise en cache IE comme vous l'avez dit, vous pouvez le tester en mode de débogage IE en appuyant sur f12 (cela fonctionnera bien en mode débogage) .IE ne prendra pas les données du serveur à chaque fois que la page appelle, cela prend les données du cache. Pour désactiver cela, effectuez l'une des opérations suivantes:

1. ajoutez ce qui suit avec votre URL de demande de service http

// Avant (délivré un)

this.httpService.get (this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + engagementName, {})

// Après (fonctionne bien)

this.httpService.get (this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + engagementName + "? DateTime =" + new Date (). getTime () + '', {cache: false})

2. désactiver le cache pour l'ensemble du module: -

$ httpProvider.defaults.headers.common ['Pragma'] = 'no-cache';

meta http-equiv="Cache-Control" content="no-cache"

Je viens de l'ajouter à View et il a commencé à fonctionner sur IE. Confirmé de travailler sur Angular 2.

Une option consiste à utiliser l'approche simple consistant à ajouter un horodatage à chaque demande, pas besoin de vider le cache.

    let c=new Date().getTime();
    $http.get('url?d='+c)

Essayez ceci, cela a fonctionné pour moi dans un cas similaire: -

$http.get("your api url", {
headers: {
    'If-Modified-Since': '0',
    "Pragma": "no-cache",
    "Expires": -1,
    "Cache-Control": "no-cache, no-store, must-revalidate"
 }
})