发起无返回值AJAX调用触发远程函数时报ERR_EMPTY_RESPONSE如何解决

net::ERR_EMPTY_RESPONSE 错误的本质是服务端接收到请求后，没有返回任何合法的HTTP响应头/内容就直接断开了连接，浏览器识别到无效空响应就会抛出该错误，和前端是否需要处理返回值无关。

不需要返回业务数据的触发类接口，服务端只需返回 204 No Content 状态码即可，无需返回任何响应体，浏览器会默认请求正常完成，不会抛出错误。
举个Node.js Express服务端的示例：

app.get('/cleartopdata', (req, res) => {
  // 执行对应的远程业务逻辑
  res.sendStatus(204); // 仅返回204状态码，无响应内容
})

其他后端语言同理，只要返回204状态码即可兼容。

如果没有权限调整服务端逻辑，可以通过以下两种前端方案规避控制台报错：

方案1：使用navigator.sendBeacon（推荐） #

该API是浏览器专门为不需要等待响应的异步通知类请求设计的，不会阻塞页面主线程，且空响应错误不会抛到控制台：

function clearTopData() {
  navigator.sendBeacon('cleartopdata');
}

注意：如果接口有数据修改操作，建议调整为POST请求，sendBeacon默认发送POST请求，也符合HTTP语义规范，避免GET请求被缓存、爬虫误触发等问题。

方案2：主动捕获请求错误 #

如果需要兼容不支持sendBeacon的老旧浏览器，可以主动给请求添加错误捕获逻辑，拦截空响应报错：

fetch写法： #

function clearTopData() {
  fetch('cleartopdata', { 
    method: 'GET',
    keepalive: true // 保证页面卸载时请求也能正常发出
  }).catch(() => {}); // 主动捕获错误，不会输出到控制台
}

原生XHR写法： #

function clearTopData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 无业务逻辑可留空
    }
  };
  xhttp.onerror = () => {}; // 监听并捕获错误，避免控制台输出
  xhttp.open("GET", "cleartopdata", true);
  xhttp.send();
}

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