问题描述
在 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 请求增加随机参数等方案解决该问题。
