Problema de caché de IE angular para http http

Puede agregar una querystring única (creo que esto es lo que hace jQuery con la opción cache: false) a la solicitud.

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

Una solución quizás mejor es si tiene acceso al servidor, entonces puede asegurarse de que los encabezados necesarios estén configurados para evitar el almacenamiento en caché. Si estás usando ASP.NET MVC esta respuesta podría ayudar.

Puede agregar un interceptor .

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

Debe eliminar la consola.registre las líneas después de la verificación.

Simplemente agregué tres meta etiquetas en index.html en el proyecto angular, y el problema de caché se resolvió en 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">

Para Angular 2 y posteriores , la forma más fácil de agregar encabezados mencionados es anular RequestOptions clase utilizada por Http servicio:

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

Y referenciarlo en su módulo:

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

El garantizado que tenía trabajando era algo en estas líneas:

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

Tuve que fusionar 2 de las soluciones anteriores con el fin de garantizar el uso correcto para todos los métodos, pero se puede reemplazar common con get u otro método es decir.put, post, delete para hacer que esto funcione para diferentes casos.

Esta única línea me ayudó (Angular 1.4.8):

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

UPD: El problema es que IE11 hace almacenamiento en caché agresivo. Cuando estaba buscando en Fiddler me di cuenta de que en el modo F12 las solicitudes están enviando "Pragma=no-cache" y endpoint se solicita cada vez que visito una página. Pero en el modo normal endpoint se solicitó solo una vez en la primera vez que visité la página.

Lo resuelvo añadiendo datetime como un número aleatorio:

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

Para evitar el almacenamiento en caché, una opción es dar URL diferentes para el mismo recurso o datos. Para generar URL diferentes, puede agregar una cadena de consulta aleatoria al final de la URL. Esta técnica funciona para jQuery, Angular u otro tipo de solicitudes ajax.

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

Solución anterior funcionará (hacer que la url única mediante la adición de la querystring un nuevo param) pero prefiero la solución proponer [aquí]: Mejor manera de Evitar IE Caché en AngularJS?, que manejan esto a nivel de servidor, ya que no es específico de IE. Es decir, si ese recurso no debe almacenarse en caché, hágalo en el servidor (esto no tiene nada que ver con el navegador utilizado; es intrisic para el recurso).

Por ejemplo en java con JAX-RS hacerlo programáticamente para JAX-RS v1 o declativly para JAX-RS v2.

Estoy seguro de que cualquiera descubrirá cómo hacerlo

He encontrado una mejor solución: Mejor Manera de Prevenir IE Cache en AngularJS?

Para los perezosos aquí hay una solución:

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

Esto es un poco viejo pero: Soluciones como es obsoleto. Deje que el servidor maneje la caché o no (en la respuesta). La única manera de garantizar que no haya almacenamiento en caché (pensando en nuevas versiones en producción) es cambiar el archivo js o css con un número de versión. Hago esto con webpack.

También puede intentar en su servce establecer encabezados como por ejemplo:

...
import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
...
 @Injectable()
export class MyService {

    private headers: HttpHeaders;


    constructor(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")                   
    }
}
....

Este problema se debe al problema de caché de IE como ha dicho, puede probarlo en el modo de depuración de IE pulsando f12 (esto funcionará bien en el modo de depuración).IE no tomará los datos del servidor cada vez que la página llame, tomará los datos de la caché. Para desactivar esto, realice una de las siguientes acciones:

1. agregue lo siguiente con su url de solicitud de servicio http

//Antes (expedido uno)

Esto.HTTPService.obtener (esto.Servicio + "/eAMobileService.svc / ValidateEngagmentName / " + engagementName , {})

//After (working fine)

Esto.HTTPService.obtener (esto.serviceUrl + " /eAMobileService.svc / ValidateEngagmentName / " + engagementName+"?DateTime= " + new Date().getTime ()+", {cache: false })

1. desactivar la caché para todo el Módulo: -

$httpProvider.predeterminado.cabecera.common ['Pragma'] = 'sin caché';

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

Acabo de añadir esto para Ver y comenzó a trabajar en IE. Confirmado para trabajar en Angular 2.

Siempre use un enfoque simple agregar marca de tiempo con cada solicitud no hay necesidad de borrar la caché

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

Prueba esto, funcionó para mí en un caso similar:-

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