it-swarm.com.de

Angular IE Caching-Problem für $ http

Alle Ajax-Aufrufe, die vom IE gesendet werden, werden von Angular zwischengespeichert, und ich erhalte ein 304 response fü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 attribute zu $ ​​http.get aber trotzdem hat es nicht geholfen. Wie kann dieses Problem behoben werden?

249
Rahul

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';
}]);
434
cnmuc

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

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

Eine vielleicht bessere Lösung ist, wenn Sie Zugriff auf den Server haben, dann können Sie sicherstellen, dass die erforderlichen Header gesetzt sind, um ein Caching zu verhindern. Wenn Sie ASP.NET MVC Verwenden diese Antwort könnte helfen.

69
Martin

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 console.log-Zeilen nach der Überprüfung entfernen.

28
dillip pattnaik

Ich habe einfach drei Meta-Tags in index.html in angular project 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">
14
rtato

Duplizieren meine Antwort in einem anderen Thread .

Für Angular 2 und neuer ist der einfachste Weg, no-cache Header durch Überschreiben von 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 darauf in Ihrem Modul:

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

Die Garantie, die ich hatte, war etwas in diese 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 musste 2 der obigen Lösungen zusammenführen, um die korrekte Verwendung für alle Methoden zu gewährleisten, aber Sie können common durch get oder eine andere Methode ersetzen, z. B. put, post, delete, damit dies für verschiedene Fälle funktioniert.

9
marksyzm

Diese einzige Zeile hat mir geholfen (Angular 1.4.8):

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

PD: Das Problem ist, dass IE11 aggressives Caching ausführt. Als ich mich mit Fiddler beschäftigte, bemerkte ich, dass im F12-Modus Anforderungen "Pragma = no-cache" senden und der Endpunkt jedes Mal angefordert wird, wenn ich eine Seite besuche. Aber im normalen Modus wurde der Endpunkt beim ersten Besuch der Seite nur einmal abgefragt.

8
yamaxim

Um ein Zwischenspeichern zu vermeiden, besteht eine Möglichkeit 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-Anfragen.

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

Ich bekomme es gelöst, indem ich datetime als Zufallszahl anhänge:

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

Die obige Lösung wird funktionieren (machen Sie die URL eindeutig, indem Sie einen neuen Parameter in den Querystring einfügen), aber ich bevorzuge den Lösungsvorschlag [hier]: Besserer Weg zur Verhinderung IE Cache in AngularJS? , die dies auf Serverebene handhaben, da es nicht IE-spezifisch 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 wesentlich). .

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

4
rguitter

Dies ist ein bisschen zu alt, aber: Lösungen wie ist veraltet. Lassen Sie den Server den Cache behandeln oder nicht (in der Antwort). Der einzige Weg, um sicherzustellen, dass kein Caching stattfindet (wenn an neue Versionen in der Produktion gedacht wird), besteht darin, die js- oder css-Datei mit einer Versionsnummer zu ändern. Das mache ich mit dem Webpack.

1
Jens Alenius

Ich habe eine bessere Lösung gefunden: Better Way to Prevent IE Cache in AngularJS?

Für Faule gibt es hier eine Lösung:

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

sie können auch in Ihrem Dienst versuchen, Überschriften wie zum Beispiel zu setzen:

 ... 
 {Injectable} aus "@ angular/core" importieren; 
 {HttpClient, HttpHeaders, HttpParams} aus "@ angular/common/http" importieren; 
 ... 
 @Injectable () 
 Exportklasse MyService {
 
 Private Header: HttpHeaders; 
 
 
 Konstruktor (private http: HttpClient ..) 
 {
 
 
 this.headers = new HttpHeaders () 
 .append ( "Content-Type", "application/json") 
 .Append ("Accept", "application/json") 
 .Append ("LanguageCulture", this.headersLanguage) 
 .append ("Cache-Control", "no-cache") 
 .append ("Pragma", "no-cache") 
} 
} 
 .... 
1
No Name

Verwenden Sie immer einen einfachen Ansatz und fügen Sie bei jeder Anforderung einen Zeitstempel hinzu, ohne dass der Cache geleert werden muss.

    let c=new Date().getTime();
    $http.get('url?d='+c)
0
Vaimeo
meta http-equiv="Cache-Control" content="no-cache"

Ich habe dies gerade zu View hinzugefügt und es hat begonnen, mit dem IE zu arbeiten. Bestätigt, um zu arbeiten Angular 2.

0
Bharat Raj

Dieses Problem ist auf das IE Caching-Problem zurückzuführen. Sie können es im IE Debug-Modus testen, indem Sie F12 drücken (dies funktioniert im Debug-Modus einwandfrei) ) .IE übernimmt nicht bei jedem Seitenaufruf die Serverdaten, sondern die Daten aus dem Cache. Um dies zu deaktivieren, führen Sie einen der folgenden Schritte aus:

  1. fügen Sie der http-Dienstanforderungs-URL Folgendes hinzu

// Vorher (ausgestellt)

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

// Nach (funktioniert gut)

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

  1. deaktivieren Sie den Cache für das gesamte Modul: -

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

0
Nijas_kp