HttpClient request資料被cache在IE

General
1

對～沒有看錯！就是萬惡的IE～每次都有奇怪的行為…
這次遇到的是cache的問題，在angularJS就開始有這系列的問題出現

在angularJS是用$httpProvider
在angular中使用Http的可以產生一個新的BaseRequestOptions去覆寫
但是在HttpClient中要怎麼使用呢？

很簡單，就是使用HttpInterceptor
我們要將req做clone然後重新設定header的內容，這樣就可以了

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

Module provide

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

自己補充一下…
如果直接加上，會連同json, image…等檔案都一起被加上
這樣會導致json file回不來(我要在研究看看@@…)

所以我在前面加上判斷，只有打api的request才加上no-cache的設定

    let nextReq = req;
    if (req.url.includes('api/')) {
      nextReq = req.clone({
        url: encodeURI(req.url),
        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')
      });
    }