Node.js JWT认证接口部分浏览器报JSON.parse错误及401未授权问题

故障根因说明 #

你遇到的JSON.parse: unexpected character at line 1 column 1 of the JSON data报错本质是：接口请求触发401拦截后，服务端返回的是纯文本错误信息/默认HTML错误页，而非预期的JSON格式，前端直接调用response.json()解析非JSON内容就会触发该报错。

可能的故障原因 #

• 前端fetch请求默认不发送跨域Cookie，你没有显式配置凭证携带参数，不同浏览器隐私策略严格程度不同：火狐开发者版、开启第三方Cookie拦截的Chrome会默认拒绝跨域Cookie发送，触发401拦截
• 请求路径存在双斜杠错误{url}/api/v1/company//get-company-by-staff-adress，部分严格的HTTP2实现、反向代理/CDN会将双斜杠路径识别为非法路径，直接返回非JSON格式的错误页
• 认证中间件存在逻辑笔误：密码修改判断逻辑写反，合法登录用户会被误拦截返回401错误
• JWT Cookie属性配置不符合规范，不同浏览器对Cookie校验规则不一致，不符合要求的Cookie会被部分浏览器拒绝携带
• CORS配置不完整，未允许凭证传递，导致Cookie被跨域策略拦截

解决步骤 #

1. 修复前端fetch请求配置，显式开启Cookie携带，同时修正路径双斜杠错误：

await fetch('{url}/api/v1/company/get-company-by-staff-adress', {
  credentials: 'include' // 强制要求跨域请求携带Cookie
}).then(/* 原有逻辑 */)

2. 修正认证中间件的逻辑笔误，原代码会在用户未修改密码时误拦截，修改后逻辑如下：

// 原错误逻辑：!isLoggedUser.changedPasswordAfter(decoded.iat)
// 修改为：用户修改过密码才触发拦截
if(isLoggedUser.changedPasswordAfter(decoded.iat)){
    return next(new AppError('User recently changed password! Please login again.',401)); 
}

3. 校验JWT Cookie配置和CORS配置：

• HTTPS环境下Cookie需设置SameSite: 'None' + Secure: true，本地HTTP开发环境设置SameSite: 'Lax'，不要开启Secure属性
• Cookie的Domain配置为前后端的共同父域名，Path设置为/避免路径拦截
• CORS配置必须显式指定Access-Control-Allow-Origin为前端域名（不能用通配符*），同时设置Access-Control-Allow-Credentials: true

4. 前端增加错误兼容逻辑，不要直接解析响应为JSON，先校验响应状态：

await fetch('{url}/api/v1/company/get-company-by-staff-adress', {
  credentials: 'include'
}).then(async response => {
  if (!response.ok) {
    // 非200状态码先读取文本内容，避免解析非JSON内容报错
    const errMsg = await response.text();
    throw new Error(`请求失败：状态码${response.status}，错误信息：${errMsg}`);
  }
  return response.json();
}).then(results => {
  // 原有业务逻辑
})

5. 服务端增加路径归一化中间件，自动把路径中的连续斜杠合并为单斜杠，避免路径解析错误。

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