React集成Twitch Helix API：带game_id的videos接口浏览器请求返回空数组

针对你遇到的浏览器端调用https://api.twitch.tv/helix/videos带game_id参数返回空数组，但服务端工具正常的情况，按以下步骤排查：

1. 移除错误的Accept请求头 #

你添加的accept: 'application/vnd.twitchtv.v5+json'是针对旧版Twitch V5 API的，而Helix API使用标准的application/json即可。这个错误的头可能导致Twitch返回非预期格式，进而被解析为空数组。直接删除该请求头，或显式设置为：

headers: {
  'Authorization': `Bearer ${your_token}`,
  'Client-Id': your_client_id,
  'Accept': 'application/json'
}

2. 检查game_id参数的格式与传递方式 #

• 确保game_id是纯数字字符串，不要添加引号或多余字符，正确格式为game_id=12345，而非game_id="12345"。
• 若查询多个游戏的视频，需重复传递game_id参数（如game_id=123&game_id=456），不要用逗号分隔（如game_id=123,456），浏览器端拼接URL时容易出现这类错误。

3. 排查地域限制问题 #

Twitch部分视频内容存在地域访问限制。你使用的服务端工具IP可能处于允许访问该游戏视频的区域，而浏览器端IP所在地区无对应可访问视频，导致返回空数组。可以：

• 在浏览器端用代理切换到与服务端工具相同的地域后重新测试。
• 换用无地域限制的热门游戏game_id（比如《英雄联盟》的game_id=21779）测试，看是否返回数据。

4. 禁用浏览器缓存 #

浏览器可能缓存了之前返回空数组的请求结果。可以在请求URL后添加随机参数（如&t=${Date.now()}）强制绕过缓存，或在浏览器开发者工具的Network面板勾选「Disable cache」选项后重新测试。

5. 对比浏览器与服务端的请求细节 #

打开浏览器开发者工具的Network面板，复制浏览器端发送的完整请求URL，直接在服务端工具中粘贴测试：

• 如果服务端工具也返回空数组，说明是game_id本身无可用视频，或参数传递有误。
• 如果服务端工具能正常返回，说明浏览器端请求构造存在隐藏问题（如编码错误、game_id被意外转义），此时对比两者的请求头，找出差异并修正。

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