Verhindern Sie das Zwischenspeichern des GET-Aufrufs von IE11 in Angular 2

Ich habe einen Ruheendpunkt, der bei einem GET-Aufruf eine Liste zurückgibt. Ich habe auch einen POST-Endpunkt, um neue Elemente hinzuzufügen, und ein LÖSCHEN, um sie zu entfernen. Dies funktioniert in Firefox und Chrome, und POST und DELETE funktionieren in IE11. Das GET in IE11 funktioniert jedoch nur beim ersten Laden der Seite. Beim Aktualisieren werden zwischengespeicherte Daten zurückgegeben. Ich habe einen Beitrag über dieses Verhalten in Angular 1 gesehen, aber nichts für Angular 2 (Release Candidate 1).

Heute hatte ich auch dieses Problem (verdammter IE). In meinem Projekt benutze ich httpclientdas nicht BaseRequestOptions. Wir sollten es verwenden Http_Interceptor, um es zu lösen!

import { HttpHandler,
    HttpProgressEvent,
    HttpInterceptor,
    HttpSentEvent,
    HttpHeaderResponse,
    HttpUserEvent,
    HttpRequest,
    HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

export class CustomHttpInterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler):
      Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
      const nextReq = req.clone({
        headers: req.headers.set('Cache-Control', 'no-cache')
          .set('Pragma', 'no-cache')
          .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
          .set('If-Modified-Since', '0')
      });

      return next.handle(nextReq);
  }
}

Modul zur Verfügung stellen

@NgModule({
    ...
    providers: [
        ...
        { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true }
    ]
})

Für Angular 2 und höher ist es am einfachsten, Header ohne Cache 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'
    });
}

Modul:

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

Wenn Sie das Angular IE Caching-Problem mit der Stapelüberlaufantwort für $ http weiterleiten , sollten Sie jeder 'GET'-Anforderung die Header' Pragma ',' no-cache ',' If-Modified-Since 'hinzufügen.

Das Szenario des Abfangjägers wird für Winkel 2 nicht mehr unterstützt. Sie sollten also das http wie hier beschrieben erweitern. Was ist das httpinterceptor-Äquivalent in angle2? .

Angular 4.3 enthält jetzt den HttpClient- Dienst, der Interceptors unterstützt.

Bearbeiten : Siehe Kommentar unten - dies ist nicht erforderlich (in den allermeisten Fällen).

Ausgehend von der Antwort von Jimmy Ho oben möchte ich nur das Zwischenspeichern meiner API-Aufrufe verhindern und nicht andere statische Inhalte, die vom Zwischenspeichern profitieren. Alle meine API-Aufrufe beziehen sich auf URLs, die "/ api /" enthalten. Daher habe ich den Code von Jimmy Ho mit einer Überprüfung geändert, bei der die Cache-Header nur hinzugefügt werden, wenn die angeforderte URL "/ api /" enthält:

import { HttpHandler,
    HttpProgressEvent,
    HttpInterceptor,
    HttpSentEvent,
    HttpHeaderResponse,
    HttpUserEvent,
    HttpRequest,
    HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

export class CustomHttpInterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    // Only turn off caching for API calls to the server.
    if (req.url.indexOf('/api/') >= 0) {
        const nextReq = req.clone({
            headers: req.headers.set('Cache-Control', 'no-cache')
                .set('Pragma', 'no-cache')
                .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
                .set('If-Modified-Since', '0')
        });

        return next.handle(nextReq);
    } else {
        // Pass the request through unchanged.
        return next.handle(req);
    }
}

}}

Wie oben beantwortet, können Sie den http-Anforderungs-Interceptor verwenden, um einen neuen Header für die Anforderung zu ändern oder festzulegen. Im Folgenden finden Sie eine viel einfachere Möglichkeit zum Festlegen von Headern auf dem http-Anforderungs-Interceptor für spätere Winkelversionen ( Winkel 4+ ). Dieser Ansatz würde nur einen bestimmten Anforderungsheader setzen oder aktualisieren. Dies soll verhindern, dass wichtige Header wie der Autorisierungsheader entfernt oder überschrieben werden.

// cache-interceptor.service.ts
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class CacheInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const httpRequest = req.clone({
      headers: req.headers
        .set('Cache-Control', 'no-cache')
        .set('Pragma', 'no-cache')
        .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
    })

    return next.handle(httpRequest)
  }
}

// app.module.ts

  import { HTTP_INTERCEPTORS } from '@angular/common/http'
  import { CacheInterceptor } from './cache-interceptor.service';

  // on providers
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }]

Deaktivieren Sie das Browser-Caching mit Meta-HTML-Tags: -

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

Ein bisschen spät, aber ich bin auf das gleiche Problem gestoßen. Für Angular 4.X habe ich eine benutzerdefinierte HTTP- Klasse geschrieben, um eine Zufallszahl an das Ende anzuhängen und ein Zwischenspeichern durch den IE zu verhindern. Es basiert auf dem 2. Link von Dimeros ( Was ist httpinterceptor-Äquivalent in angle2? ). Warnung: Nicht garantiert 100% fehlerfrei.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, XHRBackend, RequestOptions, RequestOptionsArgs, 
URLSearchParams } from '@angular/http';

@Injectable()
export class NoCacheHttp extends Http {
    constructor(backend: XHRBackend, options: RequestOptions) {
        super(backend, options);
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        //make options object if none.
        if (!options) {
            options = { params: new URLSearchParams() };
        }
        //for each possible params type, append a random number to query to force no browser caching.
        //if string
        if (typeof options.params === 'string') {
            let params = new URLSearchParams(options.params);
            params.set("k", new Date().getTime().toString());
            options.params = params;

        //if URLSearchParams
        } else if (options.params instanceof URLSearchParams) {
            let params = <URLSearchParams>options.params;
            params.set("k", new Date().getTime().toString());

        //if plain object.
        } else {
            let params = options.params;
            params["k"] = new Date().getTime().toString();
        }
        return super.get(url, options);
    }
}