Firefox调用Spotify API报NetworkError等错误 Chrome运行正常

一、Firefox下moz-extension路径报错说明 #

两个moz-extension://开头的axios、moment资源加载NetworkError属于第三方浏览器扩展导致的干扰项，和项目本身代码无关：这类报错是Firefox中安装的广告拦截、脚本注入类扩展尝试往本地开发页面注入脚本时，受浏览器扩展权限限制无法加载自身资源导致的，开启Firefox安全模式（禁用所有扩展）后刷新页面，这类报错就会消失，不影响业务逻辑运行。

二、Spotify token接口返回400错误的核心原因 #

接口返回ERR_BAD_REQUEST是代码存在两处硬错误导致，和浏览器差异无关：

• 参数名拼写错误：OAuth2授权码流程要求传递的重定向地址参数名为redirect_uri，代码中两处错写为reqirect_uri（将d误写为q），从报错的请求体可以看到，实际发出去的参数确实是错误的reqirect_uri，Spotify服务端无法识别该参数，直接判定请求非法。
• Basic认证头编码逻辑错误：构造Authorization头时，错误地在原始明文字符串上调用toString('base64')，正确逻辑应该是先将CLIENT_ID:CLIENT_SECRET的明文转为Buffer实例，再对Buffer实例调用toString('base64')完成编码。从报错的请求头可以看到，当前传递的Authorization头直接拼接了明文的客户端ID:客户端密钥，完全没有做Base64编码，不符合HTTP Basic认证的格式要求。

三、修复后的服务端回调代码 #

修复前确保已引入querystring依赖，修正后的代码如下：

const queryString = require('querystring');

app.get('/callback', (req, res) => {
    const code = req.query.code || null;

    axios({
        method: 'post',
        url: 'https://accounts.spotify.com/api/token',
        data: queryString.stringify({
            grant_type: 'authorization_code',
            code: code,
            redirect_uri: REDIRECT_URI // 修正参数拼写错误
        }),
        headers: {
            'content-type': 'application/x-www-form-urlencoded',
            // 修正Base64编码逻辑
            Authorization: `Basic ${Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64')}`
        },
    })
    .then(response => {
        res.send(`<pre>${JSON.stringify(response.data, null, 2)}</pre>`);
    })
    .catch(err => {
        // 打印错误详情方便后续排查
        console.error('获取Spotify token失败:', err.response?.data || err.message);
        res.status(err.response?.status || 500).send(err.response?.data || err.message);
    });
});

验证注意事项 #

• 确保常量REDIRECT_URI的值和Spotify开发者后台对应应用配置的回调地址完全一致，包括协议（http/https）、端口、路径，不能有多余斜杠或字符差异。
• 测试前如果仍看到moz-extension相关报错，先禁用所有Firefox扩展，排除扩展对本地请求的干扰。

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