使用Spotify API时，POST /spotifylogin路由出现连接拒绝错误

我在音乐播放器项目中使用Spotify API，每次登录后重定向到/spotifylogin路由时，控制台都会报错：POST http://localhost:3001/spotifylogin net::ERR_CONNECTION_REFUSED。

server.js 代码 #

// ==== [Cors] ====
app.use(cors());
const server = http.createServer(app);

//==== [Spotify] ====

app.use(bodyParser.json());

app.post("/spotifylogin", (req, res) => {
  const spotifyApi = new SpotifyWebApi({
    redirectUri: "http://localhost:3000/",
    clientId: "d67a6de2b2f045539acfef33cdff8840",
    clientSecret: "bd98e8446154499ab7eef56762cd16f2",
  });

  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);
    });

  app.listen(3001);
});

auth.jsx 代码 #

import { useState, useEffect } from "react";
import axios from "axios";

export default function spotifyAuth(code) {
  const [accessToken, setAccessToken] = useState();
  const [refreshToken, setRefreshToken] = useState();
  const [expiresIn, setExpiresIn] = useState();

  useEffect(() => {
    axios
      .post("http://localhost:3001/spotifylogin", { code })
      .then((res) => {
        console.log(res.data);
        setAccessToken(res.data.accessToken);
        setRefreshToken(res.data.refreshToken);
        setExpiresIn(res.data.expiresIn);
        window.history.pushStage({}, null, "/");
      })
      .catch((err) => {
        console.log(err);
      });
  }, [code]);
  return accessToken;
}

我尝试过调整CORS跨域配置，也试过通过Vite配置代理，但都没有效果。（注：我是编程新手）

1. 核心问题：服务器启动位置错误 #

你把app.listen(3001)写在了/spotifylogin的POST路由处理函数内部，这意味着只有当这个接口被调用时才会启动服务器，但此时前端已经在请求接口了，服务器根本没启动，自然会报连接拒绝错误。

修复方法：把启动代码移到路由定义的外面，放在代码最底部：

// ==== [Cors] ====
app.use(cors());
const server = http.createServer(app);

//==== [Spotify] ====

app.use(bodyParser.json());

app.post("/spotifylogin", (req, res) => {
  // 原有的路由处理代码不变
});

// 把启动代码移到这里！
app.listen(3001, () => {
  console.log("服务器在3001端口启动成功");
});

2. 未获取请求中的code参数 #

路由里直接用了code变量，但这个code是前端通过POST请求传过来的，必须从req.body里读取：

// 替换原来的spotifyApi.authorizationCodeGrant(code)
spotifyApi.authorizationCodeGrant(req.body.code)

3. 前端路由跳转方法拼写错误 #

前端代码里的window.history.pushStage是笔误，正确方法是window.history.pushState：

window.history.pushState({}, null, "/");

4. 额外操作提示 #

修改完代码后，先运行node server.js启动后端服务器，看到控制台输出启动成功的提示后，再启动前端项目，确保前后端服务都正常运行再测试登录流程。

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