在Angular 2中阻止IE11缓存GET调用

cma*_*ard 66 javascript http-caching typescript internet-explorer-11 angular

我有一个休息端点,它在GET调用上返回一个列表.我还有一个POST端点来添加新项目,还有一个DELETE来删除它们.这适用于Firefox和Chrome,POST和DELETE适用于IE11.但是,IE11中的GET仅适用于页面的初始加载.刷新返回缓存的数据.我已经在Angular 1中看过关于这种行为的帖子,但是Angular 2(发布候选者1)没有.

Vit*_*kov 56

对于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'
    });
}
Run Code Online (Sandbox Code Playgroud)

模块:

@NgModule({
    ...
    providers: [
        ...
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ]
})
Run Code Online (Sandbox Code Playgroud)

  • 这是一个很好的解决方案,使得来自角度请求的所有请求都没有缓存,但是我不希望所有请求都有这种行为,因为某些请求可以缓存得很好.我去设置适当的头服务器端.我宁愿服务器也有缓存智能.我可能措辞不好. (3认同)

Jim*_* Ho 41

今天,我也有这个问题,(该死的IE).在我的项目中,我使用httpclient,没有BaseRequestOptions.我们应该Http_Interceptor用来解决它!

import { HttpHandler,
    HttpProgressEvent,
    HttpInterceptor,
    HttpSentEvent,
    HttpHeaderResponse,
    HttpUserEvent,
    HttpRequest,
    HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

export class CustomHttpInterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler):
      Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
      const nextReq = req.clone({
        headers: req.headers.set('Cache-Control', 'no-cache')
          .set('Pragma', 'no-cache')
          .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
          .set('If-Modified-Since', '0')
      });

      return next.handle(nextReq);
  }
}
Run Code Online (Sandbox Code Playgroud)

模块提供

@NgModule({
    ...
    providers: [
        ...
        { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true }
    ]
})
Run Code Online (Sandbox Code Playgroud)

  • 谢谢,这是Angular 5的正确答案.但是,由于我在原始问题中指定了Angular 2,我将保留该问题的答案标记正确,请进行预约! (3认同)
  • 如果您使用 CORS,您可能需要将所有标头(Cache-Control、Pragma 等)添加到服务器端的“Access-Control-Request-Headers”。否则你会遇到 CORS 问题。这意味着您的请求将失败。 (2认同)

小智 6

转发$ http的stackoverflow响应Angular IE Caching问题,你应该为每个'GET'请求添加标题'Pragma','no-cache','If-Modified-Since'.

角度2不再支持拦截器的场景.所以你应该扩展http,因为这里描述的是什么是angular2中的http对象?.

Angular 4.3现在包含支持拦截器的HttpClient服务.