IE浏览器http请求缓存问题

IE浏览器http请求缓存问题,第1张

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/3998852.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-10-22
下一篇 2022-10-22

发表评论

登录后才能评论

评论列表(0条)

保存