Angular 2에서 IE11 캐싱 GET 호출 방지

Angular 2에서 IE11 캐싱 GET 호출 방지

---

GET 호출에 대한 목록을 반환하는 나머지 끝 점이 있습니다. 또한 새 항목을 추가하는 POST 끝점과 제거하는 DELETE가 있습니다. 이것은 Firefox와 Chrome에서 작동하고 POST 및 DELETE는 IE11에서 작동합니다. 그러나 IE11의 GET은 페이지의 초기로드에서만 작동합니다. 새로 고침은 캐시 된 데이터를 반환합니다. Angular 1에서이 동작에 대한 게시물을 보았지만 Angular 2 (릴리스 후보 1)에는 아무것도 없습니다.

---

들어 각도 2, 새로운 , 가장 쉬운 방법은 오버라이드 (override) 노 캐시 헤더를 추가합니다 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 }
    ]
})

---

오늘도이 문제가있었습니다. 내 프로젝트에서 내가 사용 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);
  }
}

모듈 제공

@NgModule({
    ...
    providers: [
        ...
        { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true }
    ]
})

---

$ http에 대한 stackoverflow 응답 Angular IE 캐싱 문제를 전달하고 각 'GET'요청에 'Pragma', 'no-cache', 'If-Modified-Since'헤더를 추가해야합니다.

인터셉터의 시나리오는 더 이상 각도 2에서 지원되지 않습니다. 따라서 여기에 설명 된대로 http를 확장해야합니다. angular2에서 httpinterceptor와 동등한 것은 무엇입니까? .

Angular 4.3은 이제 인터셉터를 지원 하는 HttpClient 서비스를 포함합니다.

---

편집 : 아래 주석을 참조하십시오-이것은 필요하지 않습니다 (대부분의 경우).

위의 Jimmy Ho의 답변을 확장하면 API 호출의 캐싱 만 방지하고 캐시로 인한 이점을 얻을 수있는 다른 정적 콘텐츠는 방지하고 싶습니다. 모든 API 호출은 "/ api /"가 포함 된 URL에 대한 것이므로 요청 된 URL에 "/ api /"가 포함 된 경우에만 캐시 헤더를 추가하는 검사로 Jimmy Ho의 코드를 수정했습니다.

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>> {
    // Only turn off caching for API calls to the server.
    if (req.url.indexOf('/api/') >= 0) {
        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);
    } else {
        // Pass the request through unchanged.
        return next.handle(req);
    }
}

}

---

메타 HTML 태그로 브라우저 캐싱 비활성화 :-

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

---

조금 늦었지만 같은 문제가 발생했습니다. Angular 4.X의 경우 IE의 캐싱을 방지하기 위해 끝에 난수를 추가하는 사용자 지정 Http 클래스를 작성했습니다. dimeros에 의한 두 번째 링크를 기반으로합니다 ( angular2에서 httpinterceptor는 무엇입니까? ). 경고 : 100 % 버그가 없다는 보장은 없습니다.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, XHRBackend, RequestOptions, RequestOptionsArgs, 
URLSearchParams } from '@angular/http';

@Injectable()
export class NoCacheHttp extends Http {
    constructor(backend: XHRBackend, options: RequestOptions) {
        super(backend, options);
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        //make options object if none.
        if (!options) {
            options = { params: new URLSearchParams() };
        }
        //for each possible params type, append a random number to query to force no browser caching.
        //if string
        if (typeof options.params === 'string') {
            let params = new URLSearchParams(options.params);
            params.set("k", new Date().getTime().toString());
            options.params = params;

        //if URLSearchParams
        } else if (options.params instanceof URLSearchParams) {
            let params = <URLSearchParams>options.params;
            params.set("k", new Date().getTime().toString());

        //if plain object.
        } else {
            let params = options.params;
            params["k"] = new Date().getTime().toString();
        }
        return super.get(url, options);
    }
}

참고URL : https://stackoverflow.com/questions/37755782/prevent-ie11-caching-get-call-in-angular-2