Spotify API token request - 400 `SyntaxError: Unexpected End of Input`

Question

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

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

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)

Answer 1

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

Answer 2

您可以尝试像下面那样更新您的 header，因为您正在 body

上传递 JSON

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

更新了您的 header 以接受 JSON 格式

我已尝试更新您的请求并进一步更新此 header 能够 post 我的 body 符合预期。由于我没有凭据，我收到了 500，但我的请求已到达服务器。

Answer 3

我无法使用 fetch 库成功完成请求，但使用具有相同 headers 的 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
        }
    });

Spotify API token request - 400 `SyntaxError: Unexpected End of Input`

Spotify API token request - 400 `SyntaxError: Unexpected End of Input`

fetch

spotify

reactjs

next.js