Angular IE缓存$http的问题

你可以添加一个唯一的querystring(我相信这就是jQuery对cache: false选项所做的)到请求。

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

一个可能更好的解决方案是，如果您可以访问服务器，那么您可以确保设置必要的头文件以防止缓存。如果你正在使用ASP.NET MVC 这个答案可能会有帮助。

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

你可以添加一个拦截器。

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行。

上面的解决方案将工作(通过在查询字符串中添加一个新的参数使url唯一)，但我更喜欢解决方案建议[这里]:在AngularJS中防止IE缓存的更好方法?，它在服务器级处理这个问题，因为它不是特定于IE。我的意思是，如果资源不应该被缓存，那就在服务器上做(这与使用的浏览器无关;这是资源的固有属性)。

例如，在JAX-RS的java中，为JAX-RS v1执行编程或为JAX-RS v2执行declativly。

我相信任何人都能弄清楚怎么做

我简单地在angular project的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">

我得到它解决附加datetime作为一个随机数:

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

我所做的保证是这样的:

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个，但你可以用get或其他方法替换common，即put， post， delete，使其适用于不同的情况。

正确的服务器端解决方案:在AngularJS中防止IE缓存的更好方法?

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

只有这一行对我有帮助(Angular 1.4.8):

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

问题是IE11进行了主动缓存。当我在研究Fiddler时，我注意到在F12模式下请求发送“Pragma=no-cache”，每次访问页面时都请求endpoint。但是在正常模式下，当我第一次访问页面时，端点只被请求了一次。

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

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

这个问题是由于你说的IE缓存问题，你可以在IE调试模式下按f12测试它(这在调试模式下工作很好)。IE不会在每次页面调用时获取服务器数据，而是从缓存中获取数据。要禁用此功能，请执行以下任一操作:

1. 在下面附加HTTP服务请求url

//之前(已发行)

this.httpService.get(这一点。serviceUrl + "/eAMobileService. "svc/ValidateEngagmentName/" + engagementName， {})

//After (working fine)

this.httpService.get(这一点。serviceUrl + "/eAMobileService. "svc/ValidateEngagmentName/“+ engagementName +”?DateTime=" + new Date().getTime() + "， {cache: false})

2. 禁用整个模块的缓存:-

$httpProvider.defaults.headers.common['Pragma'] = '无缓存';

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

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

我把这个添加到视图中，它就开始在IE上工作了。确认可以在Angular 2上运行。

复制我的答案在另一个帖子里。

对于Angular 2及更新版本，最简单的方法是通过覆盖RequestOptions来添加no-cache头文件:

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

一种选择是使用简单的方法，为每个请求添加时间戳，不需要清除缓存。

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

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

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

试试这个，在类似的情况下它对我很有效:-

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