web-dev-qa-db-fra.com

Empêcher l'appel GET en mémoire cache IE11 dans Angular 2

J'ai un point final de repos qui renvoie une liste sur un appel GET. J'ai également un POST noeud final pour ajouter de nouveaux éléments et un SUPPRIMER pour les supprimer. Cela fonctionne dans Firefox et Chrome, et les POST et DELETE fonctionnent dans IE11. Cependant, GET dans IE11 ne fonctionne qu'au chargement initial de la page. L'actualisation renvoie les données mises en cache. J'ai vu des messages à propos de ce comportement dans Angular 1 mais rien pour Angular 2 (release candidate 1).

javascriptangulartypescriptinternet-explorer-11http-caching
58
cmaynard

Pour Angular 2 et versions ultérieures , la méthode la plus simple pour ajouter des en-têtes sans cache en remplaçant la variable 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'
    });
}

Module:

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

Aujourd'hui, j'ai aussi eu ce problème, (putain IE) . Dans mon projet, j'utilise httpclient, cela n'a pas BaseRequestOptions. Nous devrions utiliser Http_Interceptor pour le résoudre!

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

Module fournir

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

Transférez la réponse stackoverflow Angular IE Problème de mise en cache pour $ http , vous devez ajouter les en-têtes "Pragma", "no-cache", "If-Modified-Since" à chaque demande "GET". 

Le scénario de l'intercepteur n'est plus supporté par angular 2. Vous devriez donc étendre le http tel qu'il est décrit ici Quel est l'équivalent httpinterceptor dans angular2? . 

Angular 4.3 inclut maintenant le service HttpClient , qui prend en charge les intercepteurs.

6
dimeros

Edit : Voir le commentaire ci-dessous - ceci n'est pas nécessaire (dans la grande majorité des cas).

En développant la réponse de Jimmy Ho ci-dessus, je souhaite uniquement empêcher la mise en cache de mes appels d'API, et non tout autre contenu statique qui bénéficierait de la mise en cache. Tous mes appels d'API concernent des URL contenant "/ api /". J'ai donc modifié le code de Jimmy Ho avec une vérification qui ajoute uniquement les en-têtes de cache si l'URL demandée contient "/ api /":

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

}

2
AndrWeisR

Un peu tard, mais j'ai rencontré le même problème. Pour Angular 4.X, j’ai écrit une classe HTTP personnalisée pour ajouter un nombre aléatoire à la fin afin d’empêcher la mise en cache par IE. Il est basé sur le 2e lien par les dimères ( Quel est l'équivalent httpinterceptor dans angular2? ). Attention: pas de garantie d'être 100% sans bug.

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);
    }
}
0
Chris Moore

Désactiver la mise en cache du navigateur avec les balises meta HTML: -

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