Node.js项目对接前端JS传输数据时fetch报Failed to fetch的问题排查

报错核心诱因排查 #

• 跨域资源共享（CORS）拦截：浏览器默认拦截跨源请求，当跨域访问时目标服务没有返回允许跨域的响应头，请求会被直接阻断，甚至不会到达目标服务的日志打印环节，抛出TypeError: Failed to fetch
• 服务实例不匹配：本地写的监听3000端口的Express代码，和fetch请求的线上https://discbottest-2.mathman05.repl.co不是同一个运行实例，未将代码部署到对应线上站点时，请求找不到对应服务
• 托管平台网络绑定问题：在Repl类在线托管环境中，如果服务没有显式绑定对外可访问的网络接口，会仅在容器内部提供服务，外部请求直接连接超时
• 混合内容拦截：如果你的前端页面是HTTPS协议，请求未配置有效证书的HTTP接口时，浏览器会自动拦截请求

对应调整方案 #

1. 改造Express服务端配置
   补充跨域响应头，同时适配托管平台的网络绑定要求，改造后的可直接运行的代码如下：

   const app = require('express')();
   // 全局请求中间件，统一处理跨域配置
   app.use((req, res, next) => {
     // 测试阶段允许所有源访问，生产环境可替换为实际的前端域名
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
     // 直接返回预检请求的响应
     if (req.method === 'OPTIONS') return res.sendStatus(200);
     next();
   })
   
   app.get('/', (req, res) => {
     console.log("tried")
     res.json({ "body": "important info" });
   });
   
   // 适配Repl平台的网络绑定要求，允许外部访问
   app.listen(3000, '0.0.0.0');
   

   注意：Express的res.send()如果传入纯数字，会被判定为HTTP状态码直接返回，因此接口返回的内容不能设为纯数字，和你之前注释的注意事项完全匹配。

2. 线上服务可用性校验
   将改造后的代码部署到对应Repl项目中，先在浏览器新标签页直接访问https://discbottest-2.mathman05.repl.co，确认能正常看到返回的JSON内容，再运行前端请求代码。
3. 前端fetch逻辑补全异常判断
   原前端代码没有做响应状态校验，遇到非200的响应时会直接解析失败，可调整为带完整错误捕获的版本：

   fetch("https://discbottest-2.mathman05.repl.co", {
     mode: 'cors'
   })
   .then(res => {
     if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`)
     return res.json()
   })
   .then(data => console.log('成功获取数据：', data))
   .catch(err => console.error('请求失败：', err));
   

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