Angular IE Caching-Problem für $ http

Alle Ajax-Anrufe, die vom IE gesendet werden, werden von Angular zwischengespeichert, und ich erhalte eine 304 responsefür alle nachfolgenden Anrufe. Obwohl die Anfrage dieselbe ist, wird die Antwort in meinem Fall nicht dieselbe sein. Ich möchte diesen Cache deaktivieren. Ich habe versucht, das cache attributezu $ http.get hinzuzufügen, aber es hat trotzdem nicht geholfen. Wie kann dieses Problem behoben werden?

Anstatt das Caching für jede einzelne GET-Anfrage zu deaktivieren, deaktiviere ich es global im $ 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';
}]);

Sie können der Anforderung entweder einen eindeutigen Querystring anhängen (ich glaube, das macht jQuery mit der Option cache: false).

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

Eine vielleicht bessere Lösung ist, wenn Sie Zugriff auf den Server haben, können Sie sicherstellen, dass die erforderlichen Header festgelegt sind, um das Caching zu verhindern. Wenn Sie ASP.NET MVC diese Antwort verwenden, kann dies hilfreich sein.

Sie können einen Abfangjäger hinzufügen.

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

Sie sollten die Zeilen console.log nach der Überprüfung entfernen.

Ich habe einfach drei Meta-Tags in index.html für ein Winkelprojekt hinzugefügt, und das Cache-Problem wurde im IE behoben.

<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">

Dupliziere meine Antwort in einem anderen Thread .

Für Angular 2 und höher ist der einfachste Weg, no-cacheHeader durch Überschreiben hinzuzufügen 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'
    });
}

Und verweisen Sie in Ihrem Modul darauf:

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

Die garantierte Arbeit, die ich hatte, war etwas in dieser Richtung:

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

Ich hatte zwei der oben genannten Lösungen zusammenführen , um die korrekte Verwendung für alle Methoden zu gewährleisten, aber Sie können ersetzen commonmit getoder einem anderen Verfahren , dh put, post, deletediese Arbeit für verschiedene Fälle zu machen.

Diese einzige Zeile hat mir geholfen (Angular 1.4.8):

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

UPD: Das Problem ist, dass IE11 aggressives Caching ausführt. Als ich mich mit Fiddler befasste, bemerkte ich, dass im F12-Modus Anfragen "Pragma = kein Cache" senden und bei jedem Besuch einer Seite ein Endpunkt angefordert wird. Im normalen Modus wurde der Endpunkt jedoch beim ersten Besuch der Seite nur einmal angefordert.

Um ein Caching zu vermeiden, besteht eine Option darin, unterschiedliche URLs für dieselbe Ressource oder dieselben Daten anzugeben. Um eine andere URL zu generieren, können Sie am Ende der URL eine zufällige Abfragezeichenfolge hinzufügen. Diese Technik funktioniert für JQuery-, Angular- oder andere Ajax-Anforderungen.

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

Ich habe es gelöst, indem ich datetime als Zufallszahl angehängt habe:

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

Die obige Lösung funktioniert (machen Sie die URL eindeutig, indem Sie im Querystring einen neuen Parameter hinzufügen), aber ich bevorzuge den Lösungsvorschlag [hier]: Besserer Weg, um den IE-Cache in AngularJS zu verhindern? , die dies auf Serverebene behandeln, da es nicht spezifisch für IE ist. Ich meine, wenn diese Ressource nicht zwischengespeichert werden soll, tun Sie dies auf dem Server (dies hat nichts mit dem verwendeten Browser zu tun; es ist für die Ressource von zentraler Bedeutung).

Zum Beispiel in Java mit JAX-RS programmgesteuert für JAX-RS v1 oder deklarativ für JAX-RS v2.

Ich bin sicher, jeder wird herausfinden, wie es geht

Das ist ein bisschen zu alt, aber: Lösungen wie sind veraltet. Lassen Sie den Server den Cache behandeln oder nicht (in der Antwort). Die einzige Möglichkeit, kein Caching zu gewährleisten (über neue Versionen in der Produktion nachzudenken), besteht darin, die js- oder css-Datei mit einer Versionsnummer zu ändern. Ich mache das mit Webpack.

Sie können auch in Ihrem Dienst versuchen, Header festzulegen, wie zum Beispiel:

...
{Injectable} aus "@ angle / core" importieren;
{HttpClient, HttpHeaders, HttpParams} aus "@ angle / common / http" importieren;
...
 @Injectable ()
Exportklasse MyService {

    private Header: HttpHeaders;


    Konstruktor (privater http: HttpClient ..) 
    {


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

Die richtige serverseitige Lösung: Besserer Weg, um den IE-Cache in AngularJS zu verhindern?

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

Dieses Problem ist auf das IE-Caching-Problem zurückzuführen, das Sie gesagt haben. Sie können es im IE-Debug-Modus testen, indem Sie f12 drücken (dies funktioniert im Debug-Modus einwandfrei) .IE nimmt die Serverdaten nicht bei jedem Aufruf der Seite auf die Daten aus dem Cache. Führen Sie einen der folgenden Schritte aus, um dies zu deaktivieren:

1. Fügen Sie Folgendes mit Ihrer http-Serviceanforderungs-URL hinzu

// Vorher (ausgestellt)

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

// Nachher (funktioniert gut)

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

2. Deaktivieren Sie den Cache für das gesamte Modul: -

$ httpProvider.defaults.headers.common ['Pragma'] = 'kein Cache';

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

Ich habe dies gerade zu View hinzugefügt und es begann im IE zu arbeiten. Bestätigt für Angular 2.

Eine Option besteht darin, den einfachen Ansatz zu verwenden, bei jeder Anforderung einen Zeitstempel hinzuzufügen, ohne dass der Cache geleert werden muss.

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

Versuchen Sie dies, es hat bei mir in einem ähnlichen Fall funktioniert: -

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