浏览器兼容性之IE浏览器http请求缓存问题

问题描述

在 IE 浏览器上使用 GET 请求时，只有第一次请求会到服务端，后续请求会直接从浏览器缓存中读取。执行完增删改操作后，无法获取最新数据。
(注：开发环境Angular8.1.0，ng-zorro-antd：~8.0.2，前端容器nginx：1.10.1。)

解决方案

此处提供两种简洁的解决途径，具体如下。

1、通过http拦截器设置请求头

新增InterceptorService.ts文件，通过HttpInterceptor接口中的intercept()方法类，对请求进行拦截。使用setHeaders方法统一设置请求头的Cache-Control、Pragma属性值为no-cache，代码实现如下：

export class InterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest, next: HttpHandler): Observable> {  
        const newReq = req.clone({  
            setHeaders: {  
                'Cache-Control': 'no-cache',  
                'Pragma': 'no-cache'
             }  
        });  
        return next.handle(newReq).pipe(  
            catchError((err: HttpErrorResponse) => return throwError(event))  
        );  
    }
}

2、更改nginx配置

通过Nginx的ngx_http_headers_module模块对Cache-Control进行配置。在接口转发配置中添加add_header Cache-Control no-store。具体配置如下：

location /api {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header Cache-Control no-store;
    proxy_read_timeout 360s;
    proxy_send_timeout 360s;
    if ( -f /data/ready ) {
        proxy_pass http://127.0.0.1:8333;
    }
    if ( !-f /data/ready ) {
        proxy_pass http://127.0.0.1:1337;
    }
}

Cache-Control常见取值及其释义：
no-cache: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age, 则缓存期间不访问服务器。
no-store: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)。
max-age: 相对过期时间, 即以秒为单位的缓存时间。
…………

总结

此外，还可以通过给 GET 请求增加随机参数等方案解决该问题。