Node.js后端HTTPS请求正常，HTTP站点发起请求报TypeError: Failed to fetch如何解决

核心触发原因 #

你遇到的报错本质是跨域预检请求失败或者浏览器混合内容策略拦截导致，两种场景都会直接终止请求抛出TypeError: Failed to fetch，且无响应返回。

具体修复步骤 #

• 修复CORS配置，放行非简单请求特征
  你当前的请求携带了两个会触发OPTIONS预检请求的非简单特征：自定义x-access-token请求头、Content-Type值为application/json，默认的cors配置不会放行自定义请求头，会直接拒绝预检请求。
  将原cors配置替换为以下内容：

app.use(cors({
  origin: '*',
  allowedHeaders: ['Content-Type', 'x-access-token'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  maxAge: 86400
}));

注意：如果后续前端请求需要携带cookie等认证凭据，不能设置origin: '*'，需要显式指定允许的前端域名列表，或动态匹配请求头中的origin值。

• 排查协议一致性问题
  确认前端请求的WEB_URL变量写死https://前缀，不要使用//开头的自动协议匹配，否则HTTP站点下会自动拼接为http://协议请求HTTPS接口，如果后端配置了强制HTTPS跳转，预检请求触发跳转时会被浏览器直接判定为跨域失败。
  如果你的HTTPS证书为自签名证书，需要先在浏览器手动访问一次接口地址，信任证书后再发起请求。
• 定位具体问题
  在前端fetch外层添加错误捕获，同时打开浏览器控制台「网络」面板，查看OPTIONS预检请求的返回状态和响应头，即可快速定位具体原因：

try {
  const response = await fetch(WEB_URL + "mention", {
    method: "POST",
    body: JSON.stringify({
      to: users,
      text,
      link: window.location.toString(),
    }),
    headers: {
      "x-access-token": accessToken,
      "Content-Type": "application/json",
    },
  });
  console.log('响应状态码：', response.status);
  const data = await response.json();
} catch (err) {
  console.error('请求错误详情：', err);
}

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