Express中res.sendFile被中止跳转至localhost:XXXX/?问题排查求助

问题根因 #

你前端登录是通过fetch发起的异步AJAX请求，服务端返回的302重定向只会被fetch内部跟随，不会触发浏览器整页跳转：

1. fetch收到后端的302响应后，会自动发起请求拉取/bidder的HTML内容，但不会把这个内容渲染到当前页面，也不会改变浏览器地址栏
2. 后端在执行res.sendFile传输HTML文件的过程中，fetch已经完成了请求接收逻辑提前断开连接，就抛出了ECONNABORTED（连接被中止）的错误
3. 直接在地址栏输入/bidder是正常的同步GET请求，浏览器会正常接收渲染HTML，所以没有问题

修复方案 #

方案1：前后端配合调整（推荐） #

后端改造：给AJAX请求返回JSON状态

把/loginPOST路由里的res.redirect逻辑替换为返回JSON结果，告知前端登录成功以及要跳转的地址：

req.session.save(() => {
  req.session.user_id = user.id;
  req.session.is_poster = user.is_poster;
  req.session.logged_in = true;
  
  let redirectUrl = '/'
  if (req.session.is_poster == false) {
    redirectUrl = '/bidder'
  } else if (req.session.is_poster == true) {
    redirectUrl = '/poster'
  }
  // 返回JSON而不是重定向
  res.json({ code: 0, message: '登录成功', redirectUrl })
});

前端改造：手动触发页面跳转

修改前端loginUser方法，收到响应后判断登录状态，用window.location.href执行整页跳转：

const loginUser = async (email, password) => {
    try {
        const response = await fetch (`/api/user/login`, {
            method: 'POST',
            body: JSON.stringify({ email, password }),
            headers: { 'Content-Type': 'application/json' },
        })
        const result = await response.json()
        if(response.ok) {
            // 登录成功后手动跳转
            window.location.href = result.redirectUrl
        } else {
            alert(result.message || '登录失败，请重试')
        }
    } catch (e) {
        console.error('登录请求错误', e)
    }
}

方案2：使用原生表单提交（无需改后端） #

如果不想调整后端逻辑，可以去掉前端的fetch提交逻辑，用浏览器原生表单提交，这样后端返回的302就会触发浏览器自动跳转：

<form action="/api/user/login" method="POST">
  <div>
      <label for="username">E-mail / Username:</label>
      <!-- 表单控件需要添加name属性和后端字段对应 -->
      <input class="text-input" id="login-email" name="email" type="text" placeholder="me@example.com" />
  </div>
  <div>
      <label for="password">Password:</label>
      <input class="text-input" type="password" name="password" id="login-password" placeholder="password">
  </div>
  <section>
      <button class="btn-lg btn-block" type="submit" id="login-button">Login</button>
      <div class="text-center" id="signupSuccessMsg"></div>
  </section>
</form>

同时删除原有绑定登录按钮的click事件和loginUser相关代码即可。

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