简体   繁体   English

Spotify Web Api/Axios/Heroku - POST 请求 500 错误

[英]Spotify Web Api/Axios/Heroku - POST Request 500 Error

I was running my React project with a node/axios backend in my localhost with no errors.我在本地主机中使用 node/axios 后端运行我的 React 项目,没有任何错误。 However, since deploying on Heroku, I can't seem to get my Axios POST requests to work, they give the errors seen below.但是,由于在 Heroku 上部署,我似乎无法让我的 Axios POST 请求工作,它们给出了下面看到的错误。

The useAuth hook, takes in the code okay from the url when the user signs in, pulling it from the url. useAuth 钩子在用户登录时从 url 中获取代码 OK,然后从 url 中提取代码。 But it fails to use the useAuth function/request to get an access token, refresh, and expires token on the axios POST request.但它无法使用 useAuth 功能/请求在 axios POST 请求上获取访问令牌、刷新和过期令牌。

In Spotifys dashboard, my heroku urls are in the redirect uris.在 Spotify 仪表板中,我的 heroku 网址在重定向 uri 中。

Note: I'm hacking my way through debugging this and have little experience in using node/axios.注意:我正在通过调试来破解我的方式,并且在使用 node/axios 方面几乎没有经验。 So I may be unaware of things which may seem obvious and doing things which aren't possible - feel free to point them out.所以我可能不知道那些看起来很明显的事情和做一些不可能的事情——请随时指出它们。

In the client folder, useAuth.js.在客户端文件夹中,使用Auth.js。

    # The parameter code is as required in console
    console.log(code)
    useEffect(() => {
        axios.post('https://heroku-url-inserted-here.com/login', {
            code,
        })
        .then(res => {
            setAccessToken(res.data.accessToken)
            setRefreshToken(res.data.refreshToken)
            setExpiresIn(res.data.expiresIn)
            window.history.pushState({}, null, '/')
        })
        .catch((err) => {
            console.log("Error in Effect 1: " + err)
            console.log(err.response.data)
        })
    }, [code])

In server.js,在 server.js 中,

app.post('/login', (req, res) => { 
    const code = req.body.code;
    const spotifyApi = new spotifyWebApi({
        redirectUri: process.env.REDIRECT_URI,
        clientId: process.env.CLIENT_ID,
        clientSecret: process.env.CLIENT_SECRET,
    })

    spotifyApi.authorizationCodeGrant(code).then(data => {
        res.json({
            accessToken: data.body.access_token,
            refreshToken: data.body.refresh_token,
            expiresIn: data.body.expires_in
        })
    }).catch((err) =>{
        console.log(err)
        res.sendStatus(400)
    })
})

Error in console: 

Error in Effect 1: AxiosError: Request failed with status code 500
500 (Internal Server Error)

I'm hoping for the /login post to set and return the three tokens to set State, allowing major functionality to then work as it did when using local host.我希望 /login 帖子设置并返回三个令牌以设置 State,从而允许主要功能像使用本地主机时一样工作。

ANSWER:回答:

I was using a.env in my localhost testing environment but didn't set any config values within Heroku, as the.env is a part of the.gitignore file.我在我的本地主机测试环境中使用 a.env,但没有在 Heroku 中设置任何配置值,因为 .env 是 .gitignore 文件的一部分。 This meant the redirectUri, clientId and clientSecret were all undefined in my server.js.这意味着 redirectUri、clientId 和 clientSecret 在我的 server.js 中都是未定义的。

Configuring vars in Heroku sorted this issue: https://devcenter.heroku.com/articles/config-vars在 Heroku 中配置 var 解决了这个问题: https://devcenter.heroku.com/articles/config-vars

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM