Next.js特殊字符用户名登录触发TypeError请求头无效字符错误

以下是几个可行的解决思路：

• 编码用户名参数
  调用signIn前，先用encodeURIComponent对用户名进行URL编码，避免特殊字符直接出现在请求参数或跳转链接里：

signIn('credentials', {
  callbackUrl: window.origin + (signInCallbackUrl ? signInCallbackUrl : '/'),
  username: encodeURIComponent($username.current?.value || ''),
  password: $password.current?.value,
});

注意后端验证用户名时，要对应使用decodeURIComponent解码后再进行校验。

• 自定义错误处理逻辑
  修改NextAuth的Credentials Provider配置，不在后端抛出错误，而是返回null，由前端自行处理登录失败的提示，避免默认跳转时携带未编码的特殊字符：

// [...nextauth].js
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: '用户名', type: 'text' },
        password: { label: '密码', type: 'password' }
      },
      async authorize(credentials) {
        // 解码前端传来的用户名
        const decodedUsername = decodeURIComponent(credentials.username);
        // 你的用户查询与密码验证逻辑
        const user = await fetchUser(decodedUsername);
        if (!user || !checkPassword(credentials.password, user.password)) {
          // 验证失败返回null，不触发默认错误跳转
          return null;
        }
        return user;
      }
    })
  ],
  pages: {
    signIn: '/login', // 指定自定义登录页
  }
});

前端调用signIn后，通过返回值或useSession判断登录状态，失败时直接在页面显示错误提示，无需依赖URL参数传递错误信息。

• 全局拦截编码Location头
  使用Next.js的Middleware拦截所有响应，对Location头进行编码，确保特殊字符被正确处理：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  const locationHeader = response.headers.get('Location');
  
  if (locationHeader) {
    response.headers.set('Location', encodeURI(locationHeader));
  }
  
  return response;
}

这个方法属于全局兜底处理，适合不想修改业务代码的场景，但要测试是否影响其他正常跳转逻辑。

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