Angular 8调用Twitch API返回404问题求助

这个问题我碰到过好几次了！错误提示里说找不到id为follows的users，这其实暴露了一个关键线索——你的请求被错误路由到Twitch的Kraken API（旧版）而不是Helix API（新版）了。Kraken的/users/{id}接口是用来查询单个用户信息的，当它收到/users/follows的请求时，会把follows当成用户ID去查找，自然返回404。而你在Postman里直接调用Helix接口正常，说明问题出在Angular项目里的请求处理逻辑上。

1. 检查HTTP拦截器（最可能的原因） #

很多项目会用HTTP拦截器统一处理Twitch API的请求，比如自动添加Client-ID或者给URL加上Kraken的前缀。如果你的拦截器没有区分Helix和Kraken接口，就会把Helix的URL错误修改成Kraken的格式。

打开项目里的HTTP拦截器代码（通常在interceptors文件夹或者app.module.ts的providers配置里），看看有没有类似这样的错误逻辑：

// 错误的拦截器逻辑示例
request = request.clone({
  url: `https://api.twitch.tv/kraken/${request.url}`,
  headers: request.headers.set('Client-ID', this.clientId)
});

如果有的话，修改逻辑排除Helix接口的URL：

// 修正后的拦截器逻辑
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 判断请求是否指向Helix API
  if (request.url.includes('helix')) {
    // 给Helix请求添加正确的Client-ID头
    const modifiedReq = request.clone({
      headers: request.headers.set('Client-ID', this.clientId)
    });
    return next.handle(modifiedReq);
  } else {
    // 对Kraken请求继续原来的处理逻辑
    const modifiedReq = request.clone({
      url: `https://api.twitch.tv/kraken/${request.url}`,
      headers: request.headers.set('Client-ID', this.clientId)
    });
    return next.handle(modifiedReq);
  }
}

2. 验证实际发送的请求 #

打开浏览器的开发者工具（F12），切换到Network标签，触发这个接口请求，重点查看：

• Request URL：是否确实是https://api.twitch.tv/helix/users/follows，有没有被改成Kraken的地址？
• Request Headers：是否包含正确的Client-ID，有没有被其他逻辑覆盖？

如果URL不对，那肯定是拦截器或者全局baseUrl的问题；如果URL正确但还是报错，可以试试添加Authorization: Bearer {你的令牌}头（虽然Postman里没带，但部分Twitch接口现在要求这个，不过你的错误提示更偏向路由问题）。

3. 优化你的服务代码（可选但推荐） #

你现在用Promise包裹Observable的写法有点冗余，Angular的HttpClient本身返回的就是Observable，直接返回它会更简洁：

getUserFollows(twitchId: string): Observable<any> {
  return this.http.get('https://api.twitch.tv/helix/users/follows', {
    headers: new HttpHeaders({ 'Client-ID': this.clientId }),
    params: new HttpParams()
      .set('to_id', twitchId)
      .set('first', '100')
  });
}

调用的时候可以用async/await配合toPromise()：

async loadUserFollows(twitchId: string) {
  try {
    const followsData = await this.yourService.getUserFollows(twitchId).toPromise();
    // 处理返回的数据
  } catch (error) {
    console.error('获取关注列表失败:', error);
  }
}

Twitch的Kraken API已经处于维护状态，官方推荐尽量迁移到Helix API，所以后续可以考虑把其他Kraken接口也逐步替换成Helix版本，避免类似的路由问题。

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