在Safari上做表单提交，踩坑的开发者不在少数。表单明明填写完整，点击提交后却卡在转菊花，最后弹个“网络连接已中断”或“请求超时”。别急着怀疑后端响应慢，十有八九是Safari对空文件字段、事件竞态或者资源加载策略的“特殊癖好”在作祟。尤其是你只改了文本内容、没重新选封面图片时，这问题简直一踩一个准。

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

表单里但凡有个 type="file" 的字段（比如封面上传），用户没有重新选文件时，Safari 并不会把它设为 null，而是留着一个空的 FileList。就是这个空对象，会让 FormData.append() 行为变得诡异，请求直接卡死在发送阶段，连后端都不一定知道发生了什么。

解决办法很直接——在 Ja vaScript 里先判断 files.length 再决定要不要 append：

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 更新和提交动作彻底拆开。

1. 把提交按钮改成 ，砍掉所有自动提交能力；
2. 绑定 click 事件，先显示加载指示器（比如转圈圈）；
3. 用 setTimeout 包裹 form.submit()，延迟至少 16ms（一个渲染帧的时间）：

document.getElementById('submit-btn').addEventListener('click', () => {
  document.getElementById('loader').style.display = 'block';
  setTimeout(() => document.getElementById('myform').submit(), 16);
});

这样一来，加载动画有足够时间渲染到屏幕上，用户不会觉得表单卡死了。

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

方法一：纯表单提交（不用 Ja vaScript 干预）

确保

标签里 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

如果接口只收 JSON，那就明确告诉浏览器你的意图：

fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
  credentials: 'include'
});

这样 Safari 就知道该怎么处理了，不会在 Content-Type 上犯糊涂。

《夸克》非常好用的免费AI浏览器

下载APP查看