Angular HttpClient调用Spotify Web API始终返回404 Not Found求助

以下是几个大概率导致问题的排查和修复方向：

1. API URL拼接错误 #

你的playlistsUrl是${environment.apiUrl}me/playlists，如果environment.apiUrl末尾没有斜杠（比如是https://api.spotify.com/v1而非https://api.spotify.com/v1/），拼接后会生成无效URLhttps://api.spotify.com/v1me/playlists，直接触发404。

修复方式：
要么确保environment.apiUrl末尾带斜杠，要么拼接时手动添加：

private playlistsUrl = `${environment.apiUrl}/me/playlists`;

2. HttpHeaders设置无效 #

HttpHeaders是不可变对象，headers.set()不会修改原变量，你的代码实际上没把Authorization头添加到请求中。缺失授权信息可能导致请求被Spotify API异常处理，间接引发404。

修复方式：
直接初始化时设置头，或通过链式调用更新：

// 方式1：初始化时直接配置
let headers = new HttpHeaders({
  'Authorization': `Bearer ${this.auth.getToken()}`
});

// 方式2：链式调用生成新的headers对象
let headers = new HttpHeaders().set('Authorization', `Bearer ${this.auth.getToken()}`);

3. 移除不必要的withCredentials参数 #

Spotify Web API不需要开启withCredentials: true，该参数用于跨域携带Cookie，但Spotify授权依赖Bearer Token而非Cookie。Postman未使用该参数，Angular中添加可能导致请求异常，进而触发404。

修复方式：
删除该参数：

return this.http.get(this.playlistsUrl, {headers})

额外排查点 #

• 打印this.auth.getToken()的返回值，确认是有效且未过期的Bearer Token，和Postman中使用的Token对比一致。
• 检查Angular环境配置，确保environment.apiUrl是Spotify官方API地址（https://api.spotify.com/v1），若使用了代理服务器，需确认代理转发规则配置正确。

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