表单提交后请求Express后端30秒控制台报多类错误的咨询

核心报错根因 #

• 请求地址完全错配
  代码中fetch请求的目标地址为 https://localhost.com/lookup/url，属于公网域名，与本地运行的Express服务无关联。Express启动日志明确显示服务运行在 http://localhost:${port} 上，为本地回环地址的本地服务。浏览器会按照公网DNS规则解析localhost.com的服务器地址，30秒超时是公网路由无法定位目标地址的典型表现，直接触发net::ERR_CONNECTION_TIMED_OUT。
• 代码逻辑硬伤导致的连锁报错
  1. 表单提交的事件回调里调用getData()时没有传URL参数，函数默认的url值是空字符串，即使修正了请求地址，提交表单时实际发的也是对当前页面地址的请求，无法获取后端数据
  2. fetch调用没有配置任何错误捕获逻辑，只有成功回调没有异常分支，一旦请求失败就会抛出未捕获的Promise错误，和实际看到的Uncaught (in promise) TypeError: Failed to fetch完全匹配
• 协议不匹配的常见踩坑
  代码中写的请求地址用了https://协议，但默认的Express服务是裸HTTP服务，没有配置SSL证书，就算把域名换成本机回环地址，用HTTPS协议请求HTTP服务也会直接连接失败。

分步调整方案 #

1. 修正请求地址和协议
   把请求目标改成和Express实际监听地址完全一致的内容，比如你的Express服务配置的端口是3000，就把地址写成 http://localhost:3000/lookup/url，不要写错域名、不要混用HTTPS协议、不要漏写端口号。
2. 补全表单提交的传参逻辑
   把事件回调里无参调用的getData()替换为带正确后端接口地址的调用，确保表单提交时实际发起的请求指向后端接口。
3. 补全错误捕获逻辑
   给fetch调用链加上.catch分支，兜住请求失败、JSON解析失败的异常，避免未捕获的Promise报错。同时在函数内部加响应状态判断，非200状态码直接抛出可读错误，不要强行解析返回内容。
4. 在Express端配置跨域规则
   前端页面和后端服务一般运行在不同端口，属于跨域请求。需要在Express路由响应里加上允许跨域的响应头，否则即使地址正确，浏览器也会拦截请求触发fetch失败。

修正后的前端参考代码 #

document.getElementById('search').addEventListener('submit', function(e) { 
  e.preventDefault(); 
  // 替换为你本地Express实际的监听端口
  getData('http://localhost:3000/lookup/url')
    .then(data => {
      console.log('后端返回的JSON数据：', data);
    })
    .catch(err => {
      console.error('接口请求异常：', err);
    });
})

async function getData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'GET',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    },
  });
  // 增加响应状态校验
  if (!response.ok) {
    throw new Error(`接口请求异常，HTTP状态码：${response.status}`);
  }
  return response.json();
}

补充说明：你提到的代码中//是JavaScript的行注释标记，只要出现在可执行代码行里，后续所有内容都会被注释掉不执行。如果把http://里的//写在注释后方，整个请求地址就不会被拼接到请求参数里，也会导致请求地址为空的问题。

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