AJAX提交Rails表单遇400错误：仅Safari留空文件字段时触发

我之前碰到过完全一模一样的问题，折腾了好一阵才摸清楚根源——这是Safari处理带direct_upload: true的空文件字段时的特有行为，再结合Nginx的连接超时逻辑，就会触发这个头疼的错误。下面是问题分析和可行的解决方案：

问题根源 #

当表单里存在设置了direct_upload: true的文件字段但未选择文件时，Safari在发送multipart请求的过程中会提前关闭连接（对应Nginx日志里的client prematurely closed stream），而Rails服务器还在等待完整的请求数据，最终就抛出invalid_request错误。其他主流浏览器（比如Chrome、Firefox）会正常处理空文件字段的请求，不会出现这个问题。

解决方案 #

方案1：前端移除空文件字段再提交 #

这是最直接有效的根治方法，通过JS在表单提交前自动移除没有选择文件的上传字段，避免Safari发送异常的请求结构。

把这段JS代码加到你的页面（比如表单所在的模板或专属JS文件）：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form[data-direct-upload-url]');
  if (!form) return;

  form.addEventListener('submit', function(e) {
    // 遍历所有文件上传字段
    this.querySelectorAll('input[type="file"]').forEach(input => {
      // 如果没有选择文件，移除字段的name属性（提交时就不会包含该字段）
      if (input.files.length === 0) {
        input.removeAttribute('name');
      } else {
        // 确保有文件的字段保留原始name属性
        input.setAttribute('name', input.dataset.originalName || input.name);
      }
    });
  });

  // 初始化时保存原始name属性，避免多次提交时丢失
  form.querySelectorAll('input[type="file"]').forEach(input => {
    input.dataset.originalName = input.name;
  });
});

方案2：调整Nginx超时配置（临时缓解） #

如果暂时没法修改前端代码，可以尝试延长Nginx的连接超时时间，给服务器足够的处理时间，但这只是缓解手段，不能从根本上解决问题：

server {
  # 其他原有配置...
  proxy_read_timeout 300s;
  proxy_connect_timeout 300s;
  client_body_timeout 300s;
}

方案3：升级Rails版本 #

部分旧版本的ActiveStorage在处理Safari的空文件直传时存在bug，升级到Rails 6.1+或更高版本可能已经修复了这个问题，可以尝试升级后验证效果。

验证方法 #

修改完成后，在Safari中只填写name字段、留空任意文件字段提交表单，应该不会再触发invalid_request错误，Nginx日志也不会再出现client prematurely closed stream的记录。

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