$ http的Angular IE缓存问题

Question

从IE发送的所有ajax调用都由Angular缓存，我为所有后续调用获得304 response。虽然请求是相同的，但在我的情况下，回复并不相同。我想禁用此缓存。我尝试将cache attribute添加到$ http.get但仍然没有帮助。如何解决这个问题？

Answer 1

我没有为每个单个GET请求禁用缓存，而是在$ 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';
}]);

Answer 2

您可以向请求附加一个唯一的查询字符串（我相信这是jQuery对cache：false选项的作用）。

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

一个更好的解决方案是，如果您有权访问服务器，那么您可以确保设置必要的标头以防止缓存。如果您使用ASP.NET MVC this answer可能会有所帮助。

Answer 3

你可以添加一个拦截器。

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

验证后应删除console.log行。

Answer 4

我只是在angular项目的index.html中添加了三个元标记，并在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">

Answer 5

复制my answer in another thread。

对于 Angular 2及更新，通过覆盖no-cache添加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'
    });
}

并在您的模块中引用它：

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

Answer 6

我工作的有保障的是这样的：

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

我必须合并上述解决方案中的两个才能保证所有方法的正确使用，但您可以将common替换为get或其他方法，即put，{{ 1}}，post使这项工作针对不同的情况。

Answer 7

这一行只对我有帮助（Angular 1.4.8）：

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

UPD：问题是IE11做了积极的缓存。当我查看Fiddler时，我注意到在F12模式下，请求发送“Pragma = no-cache”，并且每次访问页面时都会请求端点。但是在正常模式下，我第一次访问页面时只请求了一次端点。

Answer 8

为避免缓存，一种选择是为相同的资源或数据提供不同的URL。要生成不同的URL，您可以在URL的末尾添加随机查询字符串。此技术适用于JQuery，Angular或其他类型的ajax请求。

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

Answer 9

我解决了将日期时间附加为随机数：

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

Answer 10

上面的解决方案将起作用（通过在查询字符串中添加一个新的参数来使url唯一）但我更喜欢解决方案建议[here]：Better Way to Prevent IE Cache in AngularJS?，它在服务器级别处理它，因为它不是特定于IE。我的意思是，如果不应该缓存该资源，请在服务器上执行此操作（这与使用的浏览器无关;它对资源具有内在性）。

例如在带有JAX-RS的java中，对JAX-RS v1执行programatically或对JAX-RS v2执行declativly。

我相信有人会弄清楚如何做到这一点

Answer 11

我找到了更好的解决方案：Better Way to Prevent IE Cache in AngularJS?

对于懒惰的人来说，这是一个解决方案：

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

Answer 12

这有点老了但是：解决方案已经过时了。让服务器处理缓存或不缓存（在响应中）。保证不缓存（考虑生产中的新版本）的唯一方法是使用版本号更改js或css文件。我用webpack做这个。

Answer 13

你也可以尝试在你的服务中设置标题，例如：

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

Answer 14

这个问题是由于你说的IE缓存问题，你可以通过按f12在IE调试模式下测试它（这在调试模式下可以正常工作）.IE每次调用时都不会获取服务器数据，它从缓存中获取数据。要禁用此功能，请执行以下任一操作：

1. 将以下内容附加到您的http服务请求网址

//之前（发布一个）

this.httpService.get（this.serviceUrl +“/ eAMobileService.svc / CurrencyAngagmentName /”+ engagementName，{}）

//（工作正常）

之后

this.httpService.get（this.serviceUrl +“/ eMobileService.svc / ValueAngagmentName /”+ engagementName +“？DateTime =”+ new Date（）。getTime（）+''，{cache：false }）

1. 禁用整个模块的缓存： -

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

Answer 15

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

我刚刚将其添加到View中，它开始在IE上工作。确认在Angular 2上工作。

Answer 16

始终使用简单方法为每个请求添加时间戳，无需清除缓存

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

Answer 17

试试这个，它在类似的情况下对我有用： -

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