React中调用Spotify API搜歌出现401错误，求解决方法

401 Unauthorized错误表明请求未通过Spotify API的权限验证，结合你的代码，可从以下方向排查修复：

1. 验证Access Token有效性 #

• 在代码中添加console.log("Access Token:", access_token)，确认token是否存在、格式是否正确（Spotify的token为无空格的字符串）。
• Spotify的access token默认有效期1小时，若已过期，需通过官方授权流程重新获取或刷新token。
• 确保token是通过正规授权流程获取，未被篡改或遗漏字符。

2. 修复请求语法与格式问题 #

• 检查Authorization头格式：Bearer与token之间必须有一个空格，若token为空会生成无效的Bearer ，直接导致401。
• 你的代码中fetch调用缺少闭合括号，会导致执行异常，修复后示例：

getSearchResults(query){
    const access_token = this.state.token;
    const searchQuery = query;
    console.log("Search Query: " + searchQuery.toString());
    console.log("Access Token:", access_token); // 新增日志排查token
    const fetchURL = `q=${encodeURIComponent(searchQuery)}&type=track`; // 改用encodeURIComponent编码参数值
    fetch(`https://api.spotify.com/v1/search?${fetchURL}`,{
        method: "GET",
        headers:{
            Authorization: `Bearer ${access_token}`
        }
    })
    .then(response => {
        if (!response.ok) {
            console.error(`Request failed with status: ${response.status}`);
            return response.text().then(text => console.error("Response details:", text));
        }
        return response.json();
    })
    .catch(error => console.error('Fetch error:', error));
}

3. 优化搜索参数处理 #

• 错误请求中q=为空，说明searchQuery可能未正确传入，检查调用getSearchResults时是否传递了有效关键词。
• 改用encodeURIComponent单独编码搜索关键词，避免特殊字符导致参数解析错误，比直接使用encodeURI更可靠。

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