$ 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 此答案可能会有所帮助.

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

在另一个帖子中复制我的答案.

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

我不得不合并上述解决方案2,以保证所有方法的正确用法,但你可以替换common使用get或其他方法,即put,post,delete使这项工作对于不同的情况.

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