Blogger主页联系表单6小时后失效，更新页面可恢复的技术求助

问题现象 #

• Blogger主页的联系表单在发布/更新后约6小时失效，控制台抛出CORS错误：

  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.blogger.com/contact-form.do. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
  

• 对主页进行任意更新（比如修改内容、重新发布）后，表单可恢复正常运行6小时
• 主页以外的其他页面的联系表单无此问题，无需更新即可长期正常使用

问题根源分析 #

Blogger的主页（index.html）会被平台进行静态缓存优化，缓存时长约6小时。缓存后的主页HTML中，联系表单提交逻辑相关的CORS授权标识会失效，导致浏览器发起跨域请求时被拦截。而其他内页因为缓存策略不同（或缓存优先级低于主页），不会出现这个问题。

解决方案 #

以下是按优先级排序的可行解决方法：

1. 动态加载联系表单（推荐） #

通过动态插入表单的方式绕过静态缓存限制：

• 移除主页中原有的静态联系表单代码
• 在主页预留一个带id="contact-form-container"的容器元素，用来承载表单
• 添加以下JavaScript代码，实现页面加载时动态插入表单：

  window.addEventListener('load', function() {
    const formContainer = document.getElementById('contact-form-container');
    if (formContainer) {
      // 替换为你Blogger联系表单的原始HTML代码
      const formHtml = `
        <form name="contact-form">
          <input type="text" name="name" placeholder="你的姓名" required/>
          <input type="email" name="email" placeholder="你的邮箱" required/>
          <textarea name="message" placeholder="你的消息" required></textarea>
          <input type="button" value="提交" onclick="sendContactForm()"/>
        </form>
        <script>
          function sendContactForm() {
            const form = document.forms['contact-form'];
            if (!form.checkValidity()) {
              form.reportValidity();
              return;
            }
            const data = new FormData(form);
            fetch('https://www.blogger.com/contact-form.do', {
              method: 'POST',
              body: data,
              mode: 'no-cors'
            }).then(() => {
              alert('消息提交成功！');
              form.reset();
            }).catch(err => {
              alert('提交失败，请稍后重试');
            });
          }
        </script>
      `;
      formContainer.innerHTML = formHtml;
    }
  });
  

2. 修改主页缓存控制策略 #

在Blogger主页模板的<head>标签中添加缓存控制元标签，强制浏览器不长期缓存主页：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

注：此方法可能降低主页加载速度，需权衡使用。

3. 定时自动更新主页（临时 workaround） #

设置定时任务（如脚本工具），每5小时对主页进行一次微小更新（比如修改隐藏字符），触发Blogger重新生成主页内容，维持表单可用性。此为临时方案，不推荐长期使用。

验证方法 #

应用解决方案后，等待6小时以上测试主页表单提交功能，打开浏览器控制台确认无CORS相关错误。

内容的提问来源于stack exchange，提问作者Sewatech