Spotify API 令牌请求 - 400 `SyntaxError: Unexpected End of Input`答案

【问题标题】：Spotify API token request - 400 `SyntaxError: Unexpected End of Input`Spotify API 令牌请求 - 400 `SyntaxError: Unexpected End of Input`
【发布时间】：2020-01-04 16:01:27
【问题描述】：

我正在开发一个需要与 Spotify API 连接的 Next.js 网络应用。我成功获得了authorization_code，但我在api/token 端点上收到了400 错误。

我已经尝试在 fetch 调用中将 body 替换为 params 和 data。我还尝试将 JSON 解析为 const，然后再将其传递给 fetch。

try {
    const res = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            Authorization: `Basic ${process.env.SPOTIFY_CREDS_BASE_SIXTYFOUR}`,
        },
        body: JSON.stringify({
            grant_type: 'authorization_code',
            code: authCode,
            redirect_uri: process.env.SPOTIFY_REDIRECT_URI,
            client_id: process.env.SPOTIFY_CLIENT_ID,
            client_secret: process.env.SPOTIFY_CLIENT_SECRET,
        }),
    });
    const data = await res.json();

    dispatch({ type: GET_NEW_ACCESS_TOKEN_SUCCESS });
} catch (error) {
    console.error('getNewTokens() ERROR', error);
    dispatch({ type: GET_NEW_ACCESS_TOKEN_FAILURE });
}

我希望收到访问令牌，但我看到的是：

VM538:1 POST https://accounts.spotify.com/api/token 400 (Bad Request)

和

getNewTokens() ERROR SyntaxError: Unexpected end of input
    at _callee$ (AuthActions.js:37)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:5)
    at _next (asyncToGenerator.js:27)

【问题讨论】：

标签： reactjs fetch spotify next.js

【解决方案1】：

您可以尝试像下面这样更新您的标头，因为您正在将 JSON 传递到您的正文中

headers: {
        'Accept': 'application/x-www-form-urlencoded; application/json', 
         Authorization: `Basic ${process.env.SPOTIFY_CREDS_BASE_SIXTYFOUR}`,
    }

更新了您的标头以也接受 JSON 格式

我尝试更新您的请求并进一步更新此标头能够按预期发布我的正文。由于我没有凭据，我收到 500，但我的请求已到达服务器。

【讨论】：

感谢您的快速回复！不幸的是，这个解决方案似乎对我不起作用。 API 文档指定 Content-Type 标头必须为 application/x-www-form-urlencoded。其他任何事情都会给出 415 不正确的媒体类型错误。
如果您按照建议更改内容类型，您会收到 415？请确认？

【解决方案2】：

我认为问题可能是由于 JSON.stringify。请尝试内容类型 application/json

【讨论】：

感谢您这么快回复！可能是这种情况，但 Spotify API 文档指定 Content-Type 标头必须是 application/x-www-form-urlencoded。其他任何事情都会给出 415 不正确的媒体类型错误。
我也尝试过使用querystring.stringify()方法对URI组件进行编码，但无济于事。

【解决方案3】：

我无法使用fetch 库成功完成请求，但使用具有相同标头的request 库成功。

    var authOptions = {
        url: 'https://accounts.spotify.com/api/token',
        form: {
            code: code,
            redirect_uri: SPOTIFY_REDIRECT_URI,
            grant_type: 'authorization_code',
            client_id: SPOTIFY_CLIENT_ID,
            client_secret: SPOTIFY_CLIENT_SECRET,
        },
        json: true
    };

    request.post(authOptions, (error, response, body) => {
        if (!error && response.statusCode === 200) {
            // Success
        } else {
            // Failure
        }
    });

【讨论】：