从 IE 发送的所有 ajax 调用都由 Angular 缓存,我得到一个 304 response
用于所有后续调用。尽管请求是相同的,但在我的情况下响应不会相同。我想禁用这个缓存。我尝试将 cache attribute
添加到 $http.get 但它仍然没有帮助。如何解决这个问题?
我没有为每个 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';
}]);
您可以在请求中附加一个唯一的查询字符串(我相信这是 jQuery 对 cache: false 选项所做的)。
$http({
url: '...',
params: { 'foobar': new Date().getTime() }
})
一个可能更好的解决方案是,如果您可以访问服务器,那么您可以确保设置必要的标头以防止缓存。如果您使用 ASP.NET MVC
this answer 可能会有所帮助。
$http.get(url+ "?"+new Date().toString())
只是另一种表示形式,没有使用参数,而是将其添加到查询字符串中。
你可以添加一个拦截器。
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 行。
$log
以防您忘记将它们取出。
我只是在 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">
index.html
中已经有了这些元标记:/ 但是按照其他答案所示配置 $httpProvider
效果很好。
复制 my answer in another thread。
对于 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 }
]
})
If-Modified-Since
设置为很久以前的某个日期。)
headers: req.headers .set('Cache-Control', 'no-cache') .set('Pragma', 'no-cache') .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
我工作的保证是这样的:
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
以使其工作对于不同的情况。
if (!$httpProvider.defaults.headers.get) { $httpProvider.defaults.headers.common = {}; }
是什么意思吗
["If-Modified-Since"] = "0"
是非法的,并且会在某些后端生成错误请求。它应该是一个日期。
这条唯一的线帮助了我(Angular 1.4.8):
$httpProvider.defaults.headers.common['Pragma'] = 'no-cache';
UPD:问题是 IE11 进行了激进的缓存。当我查看 Fiddler 时,我注意到在 F12 模式下,请求正在发送“Pragma=no-cache”,并且每次访问页面时都会请求端点。但是在正常模式下,我第一次访问该页面时只请求了一次端点。
为了避免缓存,一种选择是为相同的资源或数据提供不同的 URL。要生成不同的 URL,您可以在 URL 的末尾添加一个随机查询字符串。此技术适用于 JQuery、Angular 或其他类型的 ajax 请求。
myURL = myURL +"?random="+new Date().getTime();
我解决了将日期时间附加为随机数的问题:
$http.get("/your_url?rnd="+new Date().getTime()).success(function(data, status, headers, config) {
console.log('your get response is new!!!');
});
上面的解决方案将起作用(通过在查询字符串中添加一个新参数来使 url 唯一)但我更喜欢提出的解决方案 [here]: Better Way to Prevent IE Cache in AngularJS?,它在服务器级别处理这个问题,因为它不是特定于 IE 的。我的意思是,如果不应该缓存该资源,请在服务器上执行(这与所使用的浏览器无关;它与资源有关)。
例如,在带有 JAX-RS 的 java 中,为 JAX-RS v1 执行 programatically 或为 JAX-RS v2 执行 declativly。
我相信任何人都会想出如何去做
这有点老了,但是:像这样的解决方案已经过时了。让服务器处理缓存或不缓存(在响应中)。保证不缓存的唯一方法(考虑生产中的新版本)是使用版本号更改 js 或 css 文件。我用 webpack 做到这一点。
您也可以尝试在您的服务中设置标题,例如:
... 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") } } ....
正确的服务器端解决方案:Better Way to Prevent IE Cache in AngularJS?
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
public ActionResult Get()
{
// return your response
}
这个问题是由于你所说的IE缓存问题,你可以在IE调试模式下按f12测试它(这在调试模式下可以正常工作)。IE不会在每次页面调用时获取服务器数据,它需要缓存中的数据。要禁用此功能,请执行以下任一操作:
将以下内容附加到您的 http 服务请求 url
//之前(下发一个)
this.httpService.get(this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" +engagementName , {})
//之后(工作正常)
this.httpService.get(this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" +engagementName + "?DateTime=" + new Date().getTime() + '', { cache: false })
禁用整个模块的缓存:-
$httpProvider.defaults.headers.common['Pragma'] = 'no-cache';
meta http-equiv="Cache-Control" content="no-cache"
我刚刚将它添加到 View 并开始在 IE 上运行。确认可以在 Angular 2 上工作。
一种选择是使用简单的方法,即为每个请求添加时间戳,无需清除缓存。
let c=new Date().getTime();
$http.get('url?d='+c)
试试这个,它在类似的情况下对我有用:-
$http.get("your api url", {
headers: {
'If-Modified-Since': '0',
"Pragma": "no-cache",
"Expires": -1,
"Cache-Control": "no-cache, no-store, must-revalidate"
}
})
If-Modified-Since
标头使 IIS+iisnode 为通过ngInclude
和ngView
加载的每个 html 文件抛出 400 Bad Request。以下两个标题为我解决了这个问题(我从没有缓存问题的 Chrome 中提取了它们):$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
If-Modified-Since = "0"
标头的使用会破坏 Tomcat(解析标头日期的问题,因为0
不是有效值 RFC)。改用值Mon, 26 Jul 1997 05:00:00 GMT
修复。