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

是什么、为什么、怎么办

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

常见原因

1. 表单重新提交

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

2. 缓存条目过期

• 缓存的数据可能已经过期或损坏。当你尝试导航回某个页面时，必要的数据丢失，导致错误。

3. 特定网站问题

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

4. 浏览器设置和扩展

• 某些设置或扩展可能会干扰Chrome的缓存和导航功能，导致此错误。

5. 网络问题

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

6. 服务器端问题

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

技术解释

• HTTP请求和缓存：当你使用POST请求提交表单时，服务器处理请求并返回响应。通常，浏览器不会缓存POST请求的响应以确保安全。当你返回包含POST请求的页面时，Chrome需要重新提交数据以获取页面。如果数据丢失或无法重新提交，就会触发 "ERR_CACHE_MISS" 错误。

• 缓存控制头：网站可以使用 Cache-Control 头来指定其内容的缓存方式。如果这些头配置不当，会导致缓存问题，从而触发此错误。

解决方法

• 网站开发者：确保适当的缓存控制头并以不需要重新提交表单的方式处理表单提交。

• 浏览器用户：遵循前面提到的故障排除步骤，清除缓存，禁用问题扩展，并保持浏览器更新。

  1. 避免在提交表单后使用返回按钮

  • 尽量在网站内导航时避免在提交表单后使用浏览器的返回按钮。

  2. 使用地址栏历史记录

  • 点击并按住Chrome中的返回按钮，可以查看浏览历史记录。选择你想返回的页面，而不是直接点击返回按钮。

  3. 使用书签

  • 在提交表单之前为重要页面添加书签，这样可以在不触发表单重新提交的情况下轻松返回这些页面。

  4. 清除浏览器缓存

  • 清除浏览器缓存和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

// nodejs
app.use((req, res, next) => {
    res.setHeader('Cache-Control', 'private, max-age=0, no-store, no-cache, must-revalidate');
    res.setHeader('Pragma', 'no-cache'); // 兼容 HTTP/1.0
    next();
});

什么是 Cache-Control: private

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

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

• 用户专用缓存

当响应被标记为 private 时，浏览器知道这些数据是为单个用户准备的，不应与其他用户共享。这确保了表单提交的敏感数据被更安全地处理。这种指令可以帮助避免不必要的表单重新提交，确保当用户返回时，浏览器可以依赖其缓存版本，而不需要重新提交表单数据。

• 优化返回导航

使用 Cache-Control: private，当用户返回到之前访问的页面时，浏览器可以从自身缓存中提供该页面的缓存版本，而不需要重新提交表单数据。这使得导航更加顺畅，并防止浏览器需要重新处理表单提交，导致 "ERR_CACHE_MISS" 错误。

额外的好处

• 安全性：使用 Cache-Control: private 确保敏感信息不存储在共享缓存中，避免被其他用户访问。

• 性能：虽然私有缓存没有公共缓存那么积极，但它仍然允许浏览器重用之前获取的数据，改善用户体验，减少后续访问的加载时间。

缺点

• 缓存效率降低：由于代理服务器和CDN不能缓存这些响应内容，服务器可能会接收到更多的请求，增加负载。

• 性能影响：对于一些公共内容，不使用共享缓存可能会增加页面加载时间，因为每次请求都需要从服务器获取内容。

2. 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;
}

3. 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 => {
            if (response.ok) {
                // 处理成功响应
            } else {
                // 处理错误响应
            }
        }).catch(error => {
            console.error('表单提交失败:', error);
        });
    });
</script>

4. 表单令牌模式

实现一个唯一的令牌用于每次表单提交，以确保每次提交仅被处理一次。将令牌存储在会话中并在表单提交时进行验证。

session_start();

// 生成唯一令牌
if (!isset($_SESSION['form_token'])) {
    $_SESSION['form_token'] = bin2hex(random_bytes(32));
}

// 在表单中包含令牌
echo '<input type="hidden" name="form_token" value="'.$_SESSION['form_token'].'">';

// 在表单提交时验证令牌
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (!isset($_POST['form_token']) || $_POST['form_token'] !== $_SESSION['form_token']) {
        // 无效令牌，拒绝提交
        exit('Invalid form submission');
    }

    // 处理表单数据
    // ...

    // 生成新令牌以防止重新提交
    $_SESSION['form_token'] = bin2hex(random_bytes(32));
}