Problema di memorizzazione nella cache IE angolare per $ http

Tutte le chiamate ajax che vengono inviate da IE vengono memorizzate nella cache da Angular e ottengo una a 304 responseper tutte le chiamate successive. Sebbene la richiesta sia la stessa, la risposta non sarà la stessa nel mio caso. Voglio disabilitare questa cache. Ho provato ad aggiungere il cache attribute$ http.get ma ancora non ha aiutato. Come si può risolvere questo problema?

Invece di disabilitare la memorizzazione nella cache per ogni singola richiesta GET, la disabilito globalmente nel $ 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';
}]);

Puoi aggiungere una querystring unica (credo che questo sia ciò che jQuery fa con la cache: opzione falsa) alla richiesta.

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

Una soluzione forse migliore è se si ha accesso al server, quindi è possibile assicurarsi che le intestazioni necessarie siano impostate per impedire la memorizzazione nella cache. Se stai usando ASP.NET MVC questa risposta potrebbe essere d'aiuto.

puoi aggiungere un intercettore.

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

è necessario rimuovere le righe console.log dopo aver verificato.

Ho semplicemente aggiunto tre meta tag in index.html sul progetto angolare e il problema della cache è stato risolto su 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">

Duplicazione della mia risposta in un'altra discussione .

Per Angular 2 e versioni successive , il modo più semplice per aggiungere no-cacheintestazioni sostituendo 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'
    });
}

E fai riferimento nel tuo modulo:

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

Quello garantito di cui avevo lavorato era qualcosa del genere:

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";
}]);

Ho dovuto fondersi 2 delle soluzioni di cui sopra, al fine di garantire il corretto utilizzo di tutti i metodi, ma è possibile sostituire commoncon geto metodo diverso cioè put, post, deleteper fare questo lavoro per i casi diversi.

Questa unica riga mi ha aiutato (Angular 1.4.8):

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

UPD: Il problema è che IE11 esegue una memorizzazione nella cache aggressiva. Quando stavo esaminando Fiddler ho notato che in modalità F12 le richieste inviano "Pragma = no-cache" e l'endpoint viene richiesto ogni volta che visito una pagina. Ma in modalità normale l'endpoint è stato richiesto solo una volta alla prima volta in cui ho visitato la pagina.

Per evitare la memorizzazione nella cache, un'opzione è fornire un URL diverso per la stessa risorsa o dati. Per generare un URL diverso, è possibile aggiungere una stringa di query casuale alla fine dell'URL. Questa tecnica funziona per richieste ajax di tipo JQuery, angolare o di altro tipo.

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

Ottengo risolto aggiungendo datetime come un numero casuale:

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

La soluzione sopra funzionerà (rendi unico l'URL aggiungendo nella querystring un nuovo parametro) ma preferisco la soluzione proposta [qui]: un modo migliore per prevenire la cache IE in AngularJS?, che gestiscono ciò a livello di server in quanto non è specifico di IE. Voglio dire, se quella risorsa non deve essere memorizzata nella cache, fallo sul server (questo non ha nulla a che fare con il browser utilizzato; è intrisico per la risorsa).

Ad esempio, in Java con JAX-RS, farlo programmaticamente per JAX-RS v1 o in modo declinante per JAX-RS v2.

Sono sicuro che qualcuno capirà come farlo

Questo è un po 'vecchio ma: soluzioni come sono obsolete. Consentire al server di gestire la cache o meno (nella risposta). L'unico modo per garantire l'assenza di memorizzazione nella cache (pensando alle nuove versioni in produzione) è modificare il file js o css con un numero di versione. Lo faccio con il webpack.

inoltre puoi provare nel tuo servizio per impostare le intestazioni come ad esempio:

...
import {Injectable} da "@ angular / core";
importare {HttpClient, HttpHeaders, HttpParams} da "@ angular / common / http";
...
 @Injectable ()
classe di esportazione MyService {

    intestazioni private: HttpHeaders;


    costruttore (privato http: HttpClient ..) 
    {


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

La soluzione corretta sul lato server: un modo migliore per prevenire la cache IE in AngularJS?

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

Questo problema è dovuto al problema di memorizzazione nella cache di IE, come hai detto, puoi testarlo in modalità di debug di IE premendo f12 (funzionerà bene in modalità di debug) .IE non prenderà i dati del server ogni volta che la pagina chiama, ci vuole i dati dalla cache. Per disabilitare ciò, procedi in uno dei seguenti modi:

1. aggiungere quanto segue all'URL della richiesta del servizio http

// Prima (emesso uno)

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

// Dopo (funzionando bene)

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

2. disabilitare la cache per l'intero modulo: -

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

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

Ho appena aggiunto questo a View e ha iniziato a funzionare su IE. Confermato per lavorare su Angular 2.

Un'opzione è quella di utilizzare il semplice approccio di aggiungere un timestamp ad ogni richiesta senza necessità di svuotare la cache.

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

Prova questo, ha funzionato per me in un caso simile: -

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