NodeJS授权后转发问题：接口返回HTML致JSON解析报错

服务器端跳转失败的原因 #

• 你通过fetch发起的是AJAX异步请求，而非浏览器原生的导航请求（比如地址栏输入URL、点击页面链接）。fetch默认不会自动跟随重定向完成页面跳转，而是会把重定向目标页面的HTML内容直接返回给前端。
• 前端代码里调用response.json()尝试将HTML解析为JSON格式，但HTML的开头是<，完全不符合JSON语法规则，因此抛出SyntaxError: Unexpected token < in JSON at position 0错误。

跳转逻辑的合理处理方式 #

在当前前后端分离的场景下，更适合由前端处理认证成功后的跳转，原因如下：

1. 前后端职责划分清晰：后端只需返回认证状态（成功/失败）及必要提示信息，页面跳转这类交互逻辑交由前端负责。
2. 适配AJAX请求的设计初衷：AJAX请求用于异步获取数据，而非触发页面导航，强行通过服务器端跳转不符合其使用场景。

具体修正方案 #

1. 后端调整路由，返回JSON格式的认证结果

// 对应你的登录请求路由
app.post('/login', (req, res) => {
  // 此处编写实际的邮箱密码验证逻辑
  const authSuccess = true; // 假设认证通过
  if (authSuccess) {
    req.session.user = { email: req.query.email }; // 保存会话信息
    return res.json({
      success: true,
      message: '认证成功',
      redirectUrl: 'http://localhost:4000/index.html'
    });
  } else {
    return res.json({
      success: false,
      message: '邮箱或密码错误'
    });
  }
});

2. 前端根据后端响应处理跳转

let response = await fetch('http://localhost:3000/login?email=test@mail.ru&password=123', { method: 'POST'});
let result = await response.json();
alert(result.message);
if (result.success) {
  window.location.replace(result.redirectUrl);
}

如果一定要使用服务器端跳转，需放弃fetch这类AJAX请求，改用浏览器原生的导航请求方式，比如表单提交：

<form action="http://localhost:3000/login" method="POST">
  <input type="email" name="email" value="test@mail.ru">
  <input type="password" name="password" value="123">
  <button type="submit">登录</button>
</form>

这种情况下，服务器端的res.redirect会正常生效，因为浏览器处理的是导航请求，会自动跟随重定向跳转页面。

内容的提问来源于stack exchange，提问作者Алексей Банников