Angular2应用调用Spotify API提示‘Invalid Access Token’错误求助

嘿，碰到Spotify API的「Invalid Access Token」错误确实挺头疼的，我帮你梳理几个可能的原因和解决办法，咱们一步步来排查：

1. 先确认你的访问令牌本身没问题 #

• 首先检查你填的access_token是不是完全正确：有没有不小心保留了代码里的<>占位符？复制粘贴的时候有没有带多余的空格、换行？这些隐形的字符都会导致令牌无效。
• Spotify的短期访问令牌默认有效期只有1小时，过期了就会失效。你可以通过开发者后台的令牌验证工具确认下令牌是否还在有效期内，或者重新获取一个新的令牌试试。
• 还要检查令牌的权限范围（scopes）：如果你的搜索请求需要特定权限，但你获取令牌时没申请对应的scopes，API也可能返回令牌无效的错误。

2. 检查请求头的构造是否正确 #

• 你的代码里Authorization头的写法是'Bearer ' + access_token，这里要注意Bearer后面必须有一个空格，少了这个空格API就认不出令牌格式。
• 打开浏览器的开发者工具（F12），切换到Network标签，找到发送给Spotify的请求，查看实际发送的请求头里的Authorization字段是不是完全正确——有没有拼写错误（比如把Authorization写成Authrization），或者令牌有没有被截断？

3. 修复URL参数的编码问题 #

• 你现在直接把搜索关键词str拼接到URL里，如果关键词包含空格、&、#这类特殊字符，会导致URL格式错误，进而可能引发API的异常响应（有时候会被误提示为令牌错误）。
• 解决方法是用encodeURIComponent()对关键词进行编码，修改URL的拼接代码：

  const encodedStr = encodeURIComponent(str);
  this.searchUrl = `https://api.spotify.com/v1/search?query=${encodedStr}&offset=0&limit=20&type=${type}&market=US`;
  

4. 调整Angular Http的请求选项写法 #

• Angular 2的Http.get()方法里，虽然直接传{ headers }是可行的，但有时候显式创建RequestOptions对象能避免一些隐性问题，试试改成这样：

  const options = new RequestOptions({ headers: headers });
  return this._http.get(this.searchUrl, options).map(res => res.json());
  

附上修改后的完整示例代码 #

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SpotifyService {
  private searchUrl: string;

  constructor(private _http: Http) { }

  searchMusic(str: string, type = 'artist') {
    // 替换成你真实的有效访问令牌，记得去掉占位符的<>
    const access_token = 'your-valid-access-token-here';
    const headers = new Headers({ 'Authorization': `Bearer ${access_token}` });
    const options = new RequestOptions({ headers: headers });
    
    // 对搜索关键词做URL编码，避免特殊字符干扰
    const encodedStr = encodeURIComponent(str);
    this.searchUrl = `https://api.spotify.com/v1/search?query=${encodedStr}&offset=0&limit=20&type=${type}&market=US`;

    return this._http
      .get(this.searchUrl, options)
      .map(res => res.json());
  }
}

额外排查技巧 #

• 用Postman或者curl手动发送同样的请求（带上你的令牌），如果能成功，说明问题在Angular代码里；如果也失败，那肯定是令牌本身的问题（过期、权限不足等）。

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