Problema de almacenamiento en caché de IE angular por $ http

Angular almacena en caché todas las llamadas ajax que se envían desde el IE y obtengo un 304 responsepara todas las llamadas posteriores. Aunque la solicitud es la misma, la respuesta no será la misma en mi caso. Quiero deshabilitar este caché. Intenté agregar el cache attribute$ http.get pero aún así no ayudó. ¿Cómo se puede resolver este problema?

En lugar de deshabilitar el almacenamiento en caché para cada solicitud GET, lo deshabilito globalmente en $ 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';
}]);

Puede agregar una cadena de consulta única (creo que esto es lo que hace jQuery con el caché: opción falsa) 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á utilizando 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 las líneas de console.log después de verificar.

Simplemente agregué tres metaetiquetas 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">

Duplicando mi respuesta en otro hilo .

Para Angular 2 y posteriores , la forma más fácil de agregar no-cacheencabezados anulando 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'
    });
}

Y referencialo en tu módulo:

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

El garantizado que tenía trabajando era algo así:

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 para garantizar el uso correcto de todos los métodos, pero puede reemplazarlo commoncon getotro método put, es decir post, deletepara que esto funcione en 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 un almacenamiento en caché agresivo. Cuando estaba buscando en Fiddler, noté que en el modo F12 las solicitudes envían "Pragma = no-cache" y se solicita un punto final cada vez que visito una página. Pero en modo normal, el punto final se solicitó solo una vez la primera vez que visité la página.

Para evitar el almacenamiento en caché, una opción es proporcionar una URL diferente para el mismo recurso o datos. Para generar una URL diferente, 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();

Lo resuelvo agregando 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!!!');
});

La solución anterior funcionará (haga que la url sea única agregando en la cadena de consulta un nuevo parámetro), pero prefiero que la solución proponga [aquí]: ¿ Mejor manera de prevenir el caché de IE en AngularJS? , que manejan esto a nivel de servidor, ya que no es específico de IE. Quiero 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 intrínseco al recurso).

Por ejemplo, en java con JAX-RS, hágalo programáticamente para JAX-RS v1 o declarativamente para JAX-RS v2.

Estoy seguro de que alguien descubrirá cómo hacerlo

Esto es un poco viejo pero: las soluciones como son obsoletas. Deje que el servidor maneje el caché o no el caché (en la respuesta). La única forma 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 servicio configurar encabezados como, por ejemplo:

...
importar {Inyectable} desde "@ angular / core";
importar {HttpClient, HttpHeaders, HttpParams} desde "@ angular / common / http";
...
 @Inyectable ()
clase de exportación MyService {

    encabezados privados: HttpHeaders;


    constructor (http privado: HttpClient ..) 
    {


        this.headers = new HttpHeaders ()
                    .append ("Content-Type", "application / json")
                    .append ("Aceptar", "aplicación / json")
                    .append ("LanguageCulture", this.headersLanguage)
                    .append ("Cache-Control", "no-cache")
                    .append ("Pragma", "sin caché")                   
    }
}
....

La solución correcta del lado del servidor: ¿ Una mejor manera de prevenir el caché de IE en AngularJS?

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

Este problema se debe al problema de almacenamiento en caché de IE, como dijiste, puedes probarlo en modo de depuración de IE presionando f12 (esto funcionará bien en modo de depuración) .IE no tomará los datos del servidor cada vez que llame la página. Los datos del caché. Para deshabilitar esto, realice una de las siguientes acciones:

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

// Antes (emitió uno)

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

// Después (trabajando bien)

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

2. deshabilitar el caché para todo el Módulo: -

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

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

Acabo de agregar esto a View y comenzó a funcionar en IE. Confirmado para trabajar en Angular 2.

Una opción es utilizar el enfoque simple de agregar una marca de tiempo con cada solicitud sin necesidad de borrar el 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"
 }
})