Next.js中间件匹配所有路由时遇Unexpected token '<'错误求助

安全阿岳

2026-7-27

问题修复方案

错误原因

当不配置matcher时，中间件会拦截所有请求，包括Next.js的静态资源（如/_next/static/下的JS/CSS）、图片优化接口、favicon.ico等。这些请求不需要进行角色校验，且getToken在这类请求上无法正确解析出有效JWT，甚至会导致响应被意外修改为HTML内容，浏览器尝试将HTML当作JS解析时，就会抛出Uncaught SyntaxError: Unexpected token '<'错误。

修复方案

不需要手动将所有页面添加到matcher数组，以下两种方法都能解决问题：

方法1：优化`matcher`规则，排除静态资源

通过否定匹配模式，让中间件只作用于页面路由，自动跳过静态资源请求：

export const config = {
  matcher: [
    // 匹配所有路径，除了以下开头的资源
    '/((?!_next/static|_next/image|favicon.ico).*)',
  ],
}

方法2：在中间件内部跳过静态资源处理

在中间件逻辑开头添加判断，直接放行静态资源请求：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { getToken } from 'next-auth/jwt'

export async function middleware(request: NextRequest) {
  // 跳过静态资源和图标请求
  if (request.nextUrl.pathname.startsWith('/_next/') || request.nextUrl.pathname === '/favicon.ico') {
    return NextResponse.next()
  }

  const token = await getToken({
    req: request,
    secret: process.env.JWT_SECRET
  }) as any
  if (token !== null && token.user.role === "admin") {
    if (request.nextUrl.pathname.startsWith('/admin')) {
      return NextResponse.next()
    } else {
      return NextResponse.redirect(new URL('/admin', request.url))
    }
  }
}