配置正确CORS头仍超时，Fetch请求失败问题求助

核心原因分析 #

你的问题本质并非CORS配置错误，而是请求超时导致的连接终止：

• 浏览器对Fetch请求存在默认超时阈值（不同浏览器略有差异，通常在30秒内，若嵌入的第三方网站有特殊设置可能更短），当API处理时间超过该阈值，浏览器会直接终止请求并抛出TypeError: Failed to fetch
• 服务器端（或反向代理）的超时配置短于API实际处理时长，提前断开了连接

具体解决方案 #

1. 前端为Fetch添加显式超时控制

给请求加上自定义超时逻辑，避免浏览器默认超时的模糊错误，同时可根据API需求调整超时时长：

// JS snippet to copy to an unknown website 
<script>
// extract data and add to the body
const extracted_data = {}

// 定义超时时间（示例设为15秒，需长于API最长处理时间）
const TIMEOUT_DURATION = 15000;

const fetchWithTimeout = (url, options, timeout) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
};

fetchWithTimeout("https://api.xxxx.com/xxxxxx/create", {
        method: "POST",
        mode: 'cors',
        body: JSON.stringify(extracted_data),
        referrer: "origin",
        headers: {
            'Content-Type': 'application/json',
        },
    }, TIMEOUT_DURATION)
        .then(function (response) {
            if (response.ok) {
                return response.json();
            } else {
                return Promise.reject(response);
            }
        })
        .then(function (data) {
            console.warn("Successfull!", data);
            alert("Success:" + JSON.stringify(data));
        })
        .catch(function (err) {
            console.warn("Something went wrong ->", err);
            alert("error:" + err.message);
        });

</script>

2. 检查并调整服务器端超时配置

• 反向代理（如Nginx）：修改站点配置文件，确保以下参数值大于API最长处理时间：

  proxy_connect_timeout 20s;
  proxy_send_timeout 20s;
  proxy_read_timeout 20s;
  

• 应用服务器：以Node.js/Express为例，设置服务器超时：

  const server = app.listen(3000);
  server.timeout = 20000; // 20秒
  

• 预飞请求适配：确保OPTIONS请求的超时配置和POST请求一致，部分代理会对OPTIONS请求单独设置更短的超时限制。

3. 额外排查项

若以上设置后仍有问题，可检查嵌入网站的Content Security Policy (CSP)，确认没有限制跨域请求的时长或连接数；同时可通过浏览器开发者工具「网络」面板的「Timing」标签，确认请求是被浏览器主动终止还是服务器断开连接。

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