首页 > 其他分享 >Chrome使用回退,出现表单提交失败,ERR_CACHE_MISS问题

Chrome使用回退,出现表单提交失败,ERR_CACHE_MISS问题

时间:2024-06-13 17:34:56浏览次数:17  
标签:Control 缓存 浏览器 ERR Chrome 表单 提交 MISS 页面

是什么、为什么、怎么办

  "ERR_CACHE_MISS" 错误通常发生在你使用浏览器的“返回”按钮时。这种错误与浏览器处理缓存数据的方式有关,特别是在处理表单和POST请求时。

  常见原因

  1. 表单重新提交

    • 当你导航回包含表单提交的页面(通常是POST请求)时,Chrome可能会提示你重新提交表单。如果表单数据不再存在于缓存中,浏览器无法自动重新提交它,导致 "ERR_CACHE_MISS" 错误。
  1. 缓存条目过期

    • 缓存的数据可能已经过期或损坏。当你尝试导航回某个页面时,必要的数据丢失,导致错误。
  1. 特定网站问题

    • 某些网站缓存处理不当。如果一个网站的缓存头部配置有问题或它如何管理用户会话中的数据有问题,当你导航回该网站时可能会导致此错误。
  1. 浏览器设置和扩展

    • 某些设置或扩展可能会干扰Chrome的缓存和导航功能,导致此错误。
  1. 网络问题

    • 临时网络问题也可能导致Chrome无法从缓存中检索所需的数据,从而产生错误。
  1. 服务器端问题

    • 服务器端问题也可能导致Chrome在尝试获取数据时响应不正确,导致错误。

 技术解释

    • HTTP请求和缓存:当你使用POST请求提交表单时,服务器处理请求并返回响应。通常,浏览器不会缓存POST请求的响应以确保安全。当你返回包含POST请求的页面时,Chrome需要重新提交数据以获取页面。如果数据丢失或无法重新提交,就会触发 "ERR_CACHE_MISS" 错误。
    • 缓存控制:网站可以使用 Cache-Control 头来指定其内容的缓存方式。如果这些头配置不当,会导致缓存问题,从而触发此错误。

 解决方法

    • 网站开发者:确保适当的缓存控制头并以不需要重新提交表单的方式处理表单提交。
    • 浏览器用户:遵循前面提到的故障排除步骤,清除缓存,禁用问题扩展,并保持浏览器更新。
      • 避免在提交表单后使用返回按钮
        • 尽量在网站内导航时避免在提交表单后使用浏览器的返回按钮。
      • 使用地址栏历史记录
        • 点击并按住Chrome中的返回按钮,可以查看浏览历史记录。选择你想返回的页面,而不是直接点击返回按钮。
      • 使用书签
        • 在提交表单之前为重要页面添加书签,这样可以在不触发表单重新提交的情况下轻松返回这些页面。
      • 清除浏览器缓存
        • 清除浏览器缓存和Cookie以防止由于旧数据导致的重新提交问题。
        • 打开Chrome。
        • Ctrl + Shift + Del 打开“清除浏览数据”菜单。
        • 选择“缓存的图片和文件”以及其他你想清除的数据。
        • 点击“清除数据”。

解决方案

  1. 使用 Cache-Control: private 的解决方案

    设置 Cache-Control: private 头可以帮助解决表单重新提交错误,因为它指示浏览器以用户特定的方式缓存页面数据,避免共享缓存带来的问题。当用户导航回页面时,浏览器可以从其私有缓存中提取页面,而不是重新提交表单数据。
// PHP
header("Cache-Control: private, max-age=0, no-store, no-cache, must-revalidate"); header("Pragma: no-cache"); // 兼容 HTTP/1.0

  理解 Cache-Control:private

    Cache-Control 头用于指定缓存机制的指令,可以应用于请求和响应。当你设置 Cache-Control: private 时,你是在告诉浏览器将响应存储为用户专用的内容,不应由共享缓存(如代理服务器或CDN)存储。

  Cache-Control: private 如何帮助防止表单重新提交错误

    1. 用户专用缓存
      1. 当响应被标记为 private 时,浏览器知道这些数据是为单个用户准备的,不应与其他用户共享。这确保了表单提交的敏感数据被更安全地处理。
      2. 这种指令可以帮助避免不必要的表单重新提交,确保当用户返回时,浏览器可以依赖其缓存版本,而不需要重新提交表单数据。
    1. 优化返回导航
      1. 使用 Cache-Control: private,当用户返回到之前访问的页面时,浏览器可以从自身缓存中提供该页面的缓存版本,而不需要重新提交表单数据。
      2. 这使得导航更加顺畅,并防止浏览器需要重新处理表单提交,导致 "ERR_CACHE_MISS" 错误。

  额外的好处

    1. 安全性:使用 Cache-Control: private 确保敏感信息不存储在共享缓存中,避免被其他用户访问。
    2. 性能:虽然私有缓存没有公共缓存那么积极,但它仍然允许浏览器重用之前获取的数据,改善用户体验,减少后续访问的加载时间。

  缺点

    1. 缓存效率降低 由于代理服务器和CDN不能缓存这些响应内容,服务器可能会接收到更多的请求,增加负载。
    2. 性能影响
      对于一些公共内容,不使用共享缓存可能会增加页面加载时间,因为每次请求都需要从服务器获取内容。
 
  1. PRG模式(Post/Redirect/Get)

  • 实现Post/Redirect/Get模式来避免表单重新提交问题。在处理完表单提交后,使用HTTP 303 See Other状态码重定向用户到一个新页面。这将把POST请求转换为GET请求,可以安全地加书签或导航返回。
// PHP 示例
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 处理表单数据
    // ...
    header("Location: /form-submitted-successfully");
    exit;
}
  1. JavaScript/AJAX表单提交

  • 使用JavaScript和AJAX异步提交表单,而无需重新加载页面。这避免了浏览器将提交视为常规表单提交,当导航返回时不会导致错误。
<form id="myForm">
    <!-- 表单字段 -->
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);

        fetch('/submit-form', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // 处理成功
        })
        .catch(error => {
            // 处理错误
        });
    });
</script>
  1. 表单令牌模式

  • 实现一个唯一的令牌用于每次表单提交,以确保每次提交仅被处理一次。将令牌存储在会话中并在表单提交时进行验证。
<form id="myForm">
    <!-- 表单字段 -->
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);

        fetch('/submit-form', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // 处理成功
        })
        .catch(error => {
            // 处理错误
        });
    });
</script>

 

标签:Control,缓存,浏览器,ERR,Chrome,表单,提交,MISS,页面
From: https://www.cnblogs.com/cyamazing/p/18246375

相关文章

  • Terraform
    Terraform1InstallTerraform1.1AmazonLinuxInstallyum-config-managertomanageyourrepositories.$sudoyuminstall-yyum-utilsUseyum-config-managertoaddtheofficialHashiCorpLinuxrepository.$sudoyum-config-manager--add-repohttps://rpm......
  • Oracle报错:“Error in invoking target ‘agent nmhs’ of makefile...”
    Oracle报错:“Errorininvokingtarget‘agentnmhs’ofmakefile...”  前言:Oracle在安装过程中的报错一定要重视,这决定你后续是否能完成安装以及是否能使用。我这边会陆续汇总一些报错现象以及解决方案共享。##InstallProduct86%报错信息:“Errorininvokingtarget'......
  • Windows Server 2012 R2部署网站后IIS,只要访问网址应用程序池就自动停止,浏览器页面提
     解决方案:1.查看windows日志通过文件资源管理器查看:打开文件资源管理器,找到“我的电脑”。右键点击“管理”。在弹出的窗口中,点击“事件查看器”。在事件查看器中,点击“Windows日志”即可查看各种日志信息 2.找到错误信息......
  • netcore HTTP Error 500.30 - ASP.NET Core app failed to start
    netcoreHTTPError500.30-ASP.NETCoreappfailedtostart 错误解释:HTTPError500.30表示在尝试启动ASP.NETCore应用程序时发生了错误。这通常是因为应用程序无法找到或无法正确加载.NETCore运行时或应用程序的相关依赖项。解决方法:确认.NETCore运行时已安装:检查......
  • MPTCP is missing from system parameters inside Mininet hosts
    https://github.com/mininet/mininet/issues/1161 Hello,Iamhavingproblemswithcertainsystemparametersnotbeingaccessiblefrom within a Mininet hosteventhoughtheyareaccessiblefromthehostsystem.Afteracleaninstallwiththefollowing:U......
  • 【异常】使用Dbeaver链接TDengine提示SQL错误[9684]:ERROR (2318): Connection reset
    一、异常内容使用Dbeaver链接TDengine提示SQL错误[9684]:ERROR(2318):Connectionreset,报错截图如下二、报错说明“ERROR(2318):Connectionreset”表示客户端与服务器之间的连接被意外地重置。这通常发生在一个应用程序试图读取或写入数据,但是连接的另一端已经关......
  • 深入探索Chrome开发者工具:开发者的利器
    前言作为一名测试,我们经常需要对web页面进行测试,很多时候我们都需要借助Chrome开发者工具(ChromeDevTools)来进行测试,无论是前端开发还是调试问题,都是必不可少的利器。本文就来给大家介绍一下Chrome开发者的使用。什么是Chrome开发者工具?Chrome开发者工具(DevTools)是GoogleChro......
  • 解决报错 cuDNN error: CUDNN_STATUS_NOT_SUPPORTED. This error may appear if you p
      训练模型出现报错cuDNNerror: CUDNN_STATUS_NOT_SUPPORTED.Thiserrormayappearifyoupassedinanon-contiguousinput.1.尝试了对可能的tensor添加.contiguous()函数,不能解决问题,排除。2.尝试将batch_size=12减小到10,不再报错,但实验要求不能减小batch_s......
  • dlib安装问题:ERROR: Could not build wheels for dlib, which is required to install
      #问题安装报错。 >pipinstalldlibDefaultingtouserinstallationbecausenormalsite-packagesisnotwriteableCollectingdlibDownloadingdlib-19.24.4.tar.gz(3.3MB)━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━......
  • Chrome 125版本,恢复旧版 UI 的方法
    Chrome最近更新后,前面修改旧版UI的方法已经全部失效,目前最新的方法是在属性>目标中添加--disable-features=CustomizeChromeSidePanel启动参数。1、Windows下面,右键点击Chrome的快捷方式图标,选择属性,修改“目标”成这样(注意中间有个空格):"C:\ProgramFiles\Google\Chrome......