Angular中使用PKCE调用Spotify Token API遇404错误求助

核心问题：授权类型参数错误 #

你在generateToken方法中设置的grant_type为client_credentials，这是完全错误的。PKCE授权流程属于授权码流程（Authorization Code Flow），对应的grant_type必须是authorization_code。

Spotify的token接口会根据grant_type匹配对应的授权逻辑：

• client_credentials用于服务器端无用户交互的授权场景，不需要code和code_verifier参数
• authorization_code才是PKCE流程对应的授权类型，需要配合code、code_verifier、redirect_uri等参数使用

修复后的generateToken方法body部分代码：

let body = new URLSearchParams({
  grant_type: 'authorization_code', // 修正此处
  code: code,
  redirect_uri: environment.frontUrl,
  client_id: environment.clientId,
  code_verifier: codeVerifier
});

额外验证项 #

除了核心参数修正，还需要确认以下几点：

• 重定向URI一致性：environment.frontUrl必须和Spotify开发者后台配置的重定向URI完全一致，包括协议（http/https）、域名、端口、路径，任何细微差异都会导致验证失败。
• code_verifier合法性：确保generateRandomString生成的code_verifier符合PKCE规范：长度43-128位，仅包含字母、数字、-、.、_、~字符。
• code有效性：授权回调获取的code只能使用一次，过期或重复使用都会导致请求失败，测试时需要重新发起授权流程获取新的code。

Postman测试注意事项 #

用Postman测试时，需确保：

1. 请求方法为POST
2. 请求头Content-Type设置为application/x-www-form-urlencoded
3. 所有参数通过表单形式提交（不要用JSON格式）
4. 使用刚获取的有效code和对应的code_verifier

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