调用Spotify API返回HTML而非JSON的解析报错求助

核心错误原因 #

你代码里最致命的问题是fetch调用时传入的是字符串字面量'FETCH_URL'，而不是你拼接好的变量FETCH_URL。这会让浏览器请求一个不存在的地址（字面意义上的'FETCH_URL'），服务器返回404的HTML页面，自然无法解析成JSON。

修正后的代码 #

const BASE_URL = 'https://api.spotify.com/v1/search?';
const FETCH_URL = `${BASE_URL}q=${this.state.query}&type=artist&limit=1`;
console.log('FETCH_URL', FETCH_URL);
// 去掉FETCH_URL的引号，使用变量
fetch(FETCH_URL, {
    method:'GET',
    headers: {
        'Accept': 'application/json',
        // GET请求不需要Content-Type头，可以移除
        "Authorization": "Bearer BQDyac2glKnbstiG79UKzKSReNbsWa_hEKlOWAZtXaFZpfx8ZibluRUmBHHO12CjLMJv3KBaKTZqUKJReA11_ItrYIkr3CmnUi6ykUD7J0gZk9pKzxjz02j4byQfSa6s7Y08OMNzugFffYc68tzZiGSDp9vB80eiiIod_igAH8ZxbPBUMsRH3pbiMY8tnJpeXmk"
    }
})
// 先检查响应状态是否正常，避免非200响应直接解析JSON报错
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
})
.then(json => {
    const artist = json.artists.items[0];
    console.log('artist', artist);
    this.setState({artist});
})
// 捕获错误，方便调试
.catch(error => console.error('请求失败:', error));

额外注意事项 #

• 移除不必要的请求头：GET请求不需要Content-Type头，这个头是用来告诉服务器你发送的请求体格式，GET请求没有请求体，所以可以删掉。
• 处理错误响应：添加response.ok检查，当返回401（token过期）、404等状态码时，提前抛出错误，避免进入json解析步骤导致语法错误。
• Token有效期：Spotify的Bearer Token是有有效期的，如果你后续再次遇到类似问题，先检查token是否过期，需要重新获取。

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