Heroku部署失败：.env配置与PORT端口错误问题咨询

问题修复步骤 #

• 修正服务端端口监听逻辑
  你当前Server.js仅声明了port变量，未实际启动端口监听，替换原port定义行为以下代码：

const port = process.env.PORT || 3001
app.listen(port, () => {
  console.log(`服务运行在端口${port}`)
})

不要在.env中硬写PORT变量，Heroku会自动注入该环境变量，本地开发时会自动 fallback 到3001。

• 修复前端请求地址硬编码问题
  Authorization.js中写死了localhost地址，部署后会请求到本地而非线上服务，替换为相对路径即可：

useEffect(() => {
    axios.post('/login', {
        code,
    }).then(res => {
        setAccessToken(res.data.accessToken)
        setRefreshToken(res.data.refreshToken)
        setExpiresIn(res.data.expiresIn)
        window.history.pushState({}, null, "/")
    }).catch(() => {
        window.location = "/"
    })
}, [code])

如果你的前后端是分开部署的，需要根据运行环境动态配置请求域名，避免本地开发和线上环境地址不一致。

• 配置Heroku环境变量
  本地的.env文件默认不会同步到Heroku，你需要在Heroku应用的设置页找到「Config Vars」板块，手动添加以下变量：

  • CLIENT_ID
  • CLIENT_SECRET
  • REDIRECT_URI：值要替换为你的Heroku应用对应的回调地址，不能使用localhost地址，同时要和Spotify后台配置的回调地址保持完全一致。

• 检查跨域配置
  如果还存在请求错误，确认服务端已配置cors中间件，允许前端域名的跨域请求。

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