Next.js中间件校验JWT访问令牌时遇JSON解析错误求排查

这个错误SyntaxError: Unexpected token < in JSON at position 4本质是你尝试解析的响应内容不是合法JSON，而是HTML文本（比如外部API返回了4xx/5xx错误页面，开头是<html>标签）。结合你在Next.js Middleware中校验JWT的场景，常见原因和解决方式如下：

1. 自定义Headers格式错误 #

Next.js Middleware中的request.headers是Headers对象，直接传给fetch的headers参数时，可能携带了大量Next.js内部头信息，被外部API拒绝后返回错误页面：

// 错误写法：传递了所有请求头，包含API不识别的字段
const res = await fetch('https://your-api.com/validate-token', {
  headers: request.headers
})

// 正确写法：只提取所需的校验头，手动构造Headers
const authHeader = request.headers.get('Authorization')
const res = await fetch('https://your-api.com/validate-token', {
  method: 'GET',
  headers: new Headers({
    'Authorization': authHeader || '',
    'Content-Type': 'application/json' // 明确指定请求格式
  })
})

2. 未先校验API响应状态 #

外部API可能因令牌无效、权限不足或自身故障返回401/404/500状态码，此时返回的是HTML错误页而非JSON。必须先判断响应状态再解析：

const res = await fetch('https://your-api.com/validate-token', { /* ... */ })

// 先检查响应是否正常
if (!res.ok) {
  if (res.status === 401) {
    // 令牌无效，重定向到登录页或返回401响应
    return NextResponse.redirect(new URL('/login', request.url))
  }
  // 其他错误可记录日志或抛出异常
  throw new Error(`API请求失败：${res.status}`)
}

// 状态正常再解析JSON
const data = await res.json()

3. Edge Runtime的fetch限制 #

Next.js Middleware运行在Edge Runtime环境，fetch行为和浏览器/Node.js有差异：

• 避免传递host等Next.js内部头，这类头可能触发API的安全校验
• 确保外部API支持Edge Runtime的fetch特性（比如不依赖Node.js专属的请求头）

4. JWT令牌格式错误 #

如果你的Authorization头缺少Bearer 前缀，或令牌本身格式损坏，API可能直接返回错误页面而非JSON响应：

const authHeader = request.headers.get('Authorization')
if (!authHeader || !authHeader.startsWith('Bearer ')) {
  // 处理令牌格式错误
  return NextResponse.json({ error: '令牌格式无效' }, { status: 400 })
}

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