浏览器后退强制刷新页面
问题描述
业务的支付支持分多次支付,每次支付的金额由购买人自己决定,即用购买人自己输入。点击下一步
跳转到收银台
,提交方式是post form 表单
,跳转到收银台
之后,选择相应的支付方式。 。今天测试测出了一个bug
,确认收货页面展现的支付金额是0.01
元,而实际的支付金额为0.03
元。
浏览器:Chrome。
查找问题
拿到业务单号,查询支付记录,查询到了该业务单号在不到1s
的时间间隔出现了两笔业务支付订单号和业务单号相同的记录,而业务支付单号应该是全局唯一的。从测试那得知他的操作方式是第一次输入金额0.01
,点击下一步,跳转到收银台
,然后点击浏览器的回退按钮,返回到上一页,修改支付金额为0.03
,点击下一步,跳转到收银台
,进行支付。那么这极有可能是由于浏览器后退,没有刷新页面造成的。
解决方案
在解决这个问题的过程中,尝试了如下几种方案:
- 通过
meta 标签
设置不缓存页面
但是很遗憾的是,并没有起作用。有网友说,需要
Cache-Control:no-cache
需要修改为Cache-Control:no-store
但是浏览器后退仍然是从缓存中读取from disk cache
。有网友说现在不支持
meta 标签
去缓存,不知是否是这个原因?
- 通过
过滤器
设置服务端响应的Cache-Control:no-cache
,设置缓存的过期为立刻过期Expires:-1
///
/// 清除页面缓存
///
public class NoCacheAttribute : ActionFilterAttribute
{
public override void OnResultExecuted(ResultExecutedContext filterContext)
{
filterContext.HttpContext.Response.CacheControl = "no-cache";
filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
filterContext.HttpContext.Response.Headers.Set("Pragma", "no-cache");
filterContext.HttpContext.Response.Headers.Set("Expires", "-1");
base.OnResultExecuted(filterContext);
}}
很遗憾的是,仍然是
from disk cache
从缓存中读取,只能是强制刷新了。
- 通过
js windows.name
控制,重新reload
页面
window.onload = function () {
if (window.name == "hasLoad") {
location.reload();
window.name = "";
} else {
window.name = "hasLoad";
}
}
这个方案成功的解决了这个问题,但是存在一个缺点是,除第一次访问这个页面外,以后再访问这个页面都会
reload
两次。参考
浏览器 返回上一页之后强行刷新一次
【浏览器后退强制刷新页面】Cache-Control
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- 分享!如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- 深圳建立强制立体绿化制度|深圳建立强制立体绿化制度 今年将超额完成46万平方米
- http请求与响应
- 带你了解NodeJS事件循环
- 解决在微信下载app需要点击右上角在浏览器中打开下载的问题
- window.navigator.userAgent用来区分设备和浏览器
- 谷歌/火狐/Safari浏览器设置手机模式浏览
- (HTML小白)如何查看浏览器header
- 浏览器标准模式和怪异模式之间的区别是什么?