NextJS集成Spotify OAuth遇405错误请求问题排查求助

1. 修正 Next.js API 路由的导出方式 #

Next.js App Router 下的 API 路由，需要直接导出对应请求方法的函数（比如 GET、POST），而不是自定义命名的 LoginHandler。你用 router.push 访问 /api/login 是发起GET请求，所以需要把登录路由的代码改成：

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const state = generateRandomString(16);
  const CLIENT_ID = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
  const scope =
    "user-read-private user-read-email user-read-playback-state user-modify-playback-state streaming";
  
  res.redirect(
    "https://accounts.spotify.com/authorize?"+
      qs.stringify({
        response_type: "code",
        client_id: CLIENT_ID,
        scope: scope,
        redirect_uri: `${REDIRECT_URL}/api/callback`,
        state: state,
      })
  );
}

如果路由文件没有导出匹配请求方法的函数，Next.js 会返回405方法不允许错误。

2. 确认回调路由的请求方法 #

Spotify 会通过GET请求把授权码发送到你的 /api/callback 路由，所以该路由也需要导出 GET 函数来处理请求，在函数内部调用 getAuthorizationTokenData 发起POST请求获取令牌（这部分代码本身没问题）。

3. 额外验证点 #

• 检查 REDIRECT_URL 环境变量是否和 Spotify 开发者后台设置的回调地址完全一致，包括协议（http/https）和端口
• 确认 generateRandomString 函数已正确定义，避免因函数报错导致路由处理失败
• 用 Postman 直接发送GET请求到 /api/login，验证修正后的路由是否正常跳转

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