fetch调用API时Chrome/Firefox报JSON.parse错误Safari正常如何修复

问题根因 #

该报错核心是fetch拿到的响应内容不符合JSON格式规范，Chrome、Firefox的JSON解析器容错性低于Safari，常见触发场景包括：

• 未判断fetch响应状态，接口返回4xx/5xx错误时返回的是HTML错误页而非JSON
• 响应内容带多余前缀字符（比如UTF-8 BOM头、后端输出的调试信息、多余空格）
• 跨域配置异常导致浏览器拿到的是跨域拦截后的空内容/错误内容
• 原有代码还存在异步逻辑时序错误、变量未声明的隐性问题

修复后代码 #

// 提前声明存储用数组，避免未定义报错
const trackNames = [];
const trackUrl = [];
const albums = [];

async function getUserTracks() {
    let rawText = '';
    try {
        const res = await fetch("https://www.soundpro.city/music/music_all/?format=json");
        // 校验响应状态
        if (!res.ok) {
            throw new Error(`请求失败，状态码：${res.status}`);
        }
        // 先获取原始文本做预处理
        rawText = await res.text();
        // 移除可能存在的UTF-8 BOM头（兼容性问题高发点）
        const cleanText = rawText.replace(/^\uFEFF/, '');
        // 手动解析JSON
        const data = JSON.parse(cleanText);
        // 遍历数据，避免隐式全局变量
        for (const item of data) {
            trackNames.push(item['title']);
            trackUrl.push(item['track']);
            albums.push(item['artist_name']);
        }
        // 异步逻辑完成后再打印结果
        console.log(trackNames, trackUrl, albums);
    } catch(error) {
        console.error('执行报错：', error);
        // JSON解析错误时打印原始响应内容方便排查
        if (error instanceof SyntaxError && error.message.includes('JSON.parse')) {
            console.log('接口返回原始内容：', rawText);
        }
    }
}

getUserTracks();

主要修改说明 #

• 移除async/await与.then()混用的不规范写法，逻辑更清晰
• 新增响应状态校验，避免接口报错时直接解析非JSON内容
• 先拉取原始响应文本做预处理，移除可能存在的UTF-8 BOM头，解决不同浏览器解析兼容性问题
• 修复异步时序问题：原有代码在调用getUserTracks()后直接打印数组，此时异步请求还未完成，拿到的是空数组
• 修复变量未声明问题：遍历的item未加const/let会变为全局变量，存在污染风险
• 新增定向报错日志，出现JSON解析错误时可直接查看原始响应内容定位问题

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