SvelteKit表单在Vercel/Netlify等平台随机失效求助

问题详情 #

我是Svelte新手，用SvelteKit搭建了极简项目，表单提交到webhook.site端点。本地运行完全正常，但部署到Vercel后提交随机失效——有时成功一次接着三次失败，有时连续成功多次后突然失败，毫无规律。后续部署到Netlify，遇到了完全相同的问题。

错误信息 #

Vercel偶尔返回的连接超时错误：

[POST] /?/create
22:12:29:53
TypeError: fetch failed
    at fetch (/var/task/node_modules/undici/index.js:105:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (/var/task/node_modules/undici/lib/core/connect.js:176:24)
      at /var/task/node_modules/undici/lib/core/connect.js:123:46
      at Immediate._onImmediate (/var/task/node_modules/undici/lib/core/connect.js:164:9)
      at process.processImmediate (node:internal/timers:471:21) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

之前的操作与状态 #

• 曾连续成功提交20多次，间隔1小时后仍能成功10次
• 移除不必要的HASURA_ADMIN_SECRET请求头后，表单彻底失效；重新添加该请求头、回滚至之前正常版本也无法恢复功能

可行解决方向 #

1. 调整fetch超时配置 #

SvelteKit服务器端使用undici库处理请求，默认超时较短，加上平台边缘网络环境容易触发超时。手动设置超时时间：

// 服务器端提交逻辑（如+page.server.js）
const response = await fetch('https://webhook.site/your-endpoint', {
  method: 'POST',
  body: formData,
  headers: {
    // 仅保留必要请求头，移除无关字段如HASURA_ADMIN_SECRET
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  signal: AbortSignal.timeout(10000) // 设置10秒超时，可按需调整
});

2. 验证请求头合法性 #

登录webhook.site查看端点请求日志，确认失败请求是否到达、是否被拒绝。重点检查：

• 端点是否要求特定请求头（之前移除HASURA_ADMIN_SECRET后彻底失效，可能端点配置依赖该头）
• 请求头格式是否规范，避免包含平台拦截的敏感字段

3. 切换到客户端提交 #

若服务器端提交不稳定，改用浏览器端提交（走用户网络，不受平台服务器网络限制）：

<script>
  async function handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    try {
      const res = await fetch('https://webhook.site/your-endpoint', {
        method: 'POST',
        body: formData
      });
      alert(res.ok ? '提交成功' : '提交失败');
    } catch (err) {
      console.error(err);
      alert('提交超时或失败');
    }
  }
</script>

<form on:submit={handleSubmit}>
  <!-- 表单字段 -->
  <button type="submit">提交</button>
</form>

4. 添加重试机制 #

针对随机超时问题，给服务器端请求加重试逻辑：

async function fetchWithRetry(url, options, retries = 3) {
  try {
    const res = await fetch(url, {
      ...options,
      signal: AbortSignal.timeout(10000)
    });
    if (!res.ok && retries > 0) return fetchWithRetry(url, options, retries - 1);
    return res;
  } catch (err) {
    if (retries > 0 && err.code === 'UND_ERR_CONNECT_TIMEOUT') {
      return fetchWithRetry(url, options, retries - 1);
    }
    throw err;
  }
}

// 使用示例
const response = await fetchWithRetry('https://webhook.site/your-endpoint', {
  method: 'POST',
  body: formData,
  headers: { /* 必要请求头 */ }
});

5. 排查平台网络限制 #

Vercel/Netlify的服务器函数存在网络访问限制：

• 确认webhook.site的IP在平台允许访问的范围内
• 临时替换webhook为其他服务（如自建API），验证是否为webhook.site自身的稳定性问题

内容的提问来源于stack exchange，提问作者Kaspar L. Palgi