如何解决Safari浏览器在网页表单提交时由于超时导致的失败？

Safari表单提交卡死主因是空file字段处理异常、submit按钮type属性干扰及渲染竞态；需校验files.length再append、移除type="submit"、用setTimeout延迟submit，并禁用手动设置Content-Type。

当Safari浏览器在提交网页表单时卡在加载状态、最终提示“网络连接已中断”或“请求超时”，这通常不是后端响应慢的问题，而是Safari对空文件字段、事件竞态或资源加载策略的特殊处理所致；尤其在仅修改文本内容而未重选封面图片等场景下极易复现。

检查并清理空file字段的干扰

若表单含type="file"字段（如封面上传），且用户未重新选择文件，Safari会将该字段视为空FileList但不设为null，导致FormData.append()行为异常，请求卡死在发送阶段。

在JavaScript提交逻辑中，先判断file字段是否为空再决定是否追加：

const fileInput = document.getElementById('cover-upload');

const files = fileInput.files;

if (files.length > 0) { formData.append('cover', files[0]); }

【必须删除原生submit按钮的type="submit"属性】，否则即使加了preventDefault()，Safari仍可能在事件循环中提前触发导航，跳过后续逻辑执行。

强制延迟表单提交以规避渲染竞态

Safari桌面版在onclick触发后会优先执行表单默认提交，常导致加载动画来不及渲染就被页面跳转中断。解耦UI更新与提交动作是唯一稳定方案。

第一步：把提交按钮改为，移除所有自动提交能力；

第二步：为按钮绑定click事件，在其中先显示加载指示器；

第三步：用setTimeout包裹表单submit()调用，延迟至少16ms（一个渲染帧）；

document.getElementById('submit-btn').addEventListener('click', () => {

document.getElementById('loader').style.display = 'block';

setTimeout(() => document.getElementById('myform').submit(), 16);

});

验证并修正Content-Type与请求头匹配性

方法一：纯表单提交（无JS干预）

确保

标签method="post"且无onsubmit="return false"类拦截；Safari对原生提交的Content-Type推导更稳定，不会因手动设置application/json而失败。

方法二：AJAX提交时禁用手动设置Content-Type

使用FormData对象时，切勿主动设置headers['Content-Type']——让浏览器自动生成带boundary的multipart/form-data头；否则Safari会拒绝发送请求。

方法三：针对纯JSON接口，显式声明contentType并启用credentials

fetch('/api/submit', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(data),

credentials: 'include'

})