发布请求 net::ERR_CONNECTION_REFUSED

Question

我正在构建将 Spotify 的 API 与授权代码流结合起来的 React/Redux/Node 应用程序。 这是一个带有 React-Router 的 SPA，它具有三个路由：登录、时间线和结果。 从时间轴遍历结果时，我收到此错误：

POST http://localhost:3001/login net::ERR_CONNECTION_REFUSED

这是 Github 存储库。

这是打开 Chrome DevTools 的错误视频。

useAuth.jsx（自定义挂钩）

import { useState, useEffect } from 'react'
import axios from 'axios'

const useAuth = (code) => {

  const [accessToken, setAccessToken] = useState()

  useEffect(() => {
   axios.post('http://localhost:3001/login', {
       code,
   }).then(res => {
       setAccessToken(res.data.accessToken)
       window.history.pushState({}, null, '/')
   }).catch((err) => {
       console.log(err)
    })
 }, [code])

  return accessToken
}
export default useAuth

服务器.js

require('dotenv').config()
const express = require('express');
const SpotifyWebApi = require('spotify-web-api-node');
const cors = require('cors')
const bodyParser = require('body-parser')

const app = express();
app.use(cors())
app.use(bodyParser.json())

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(() => {
        res.sendStatus(400)
    })
})

app.listen(3001)

应用程序.js

import {useState, useEffect} from 'react'
import { Login } from './Login'
import { Timeline } from './Timeline'
import { Results } from './Results'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './App.css'

const code = new URLSearchParams(window.location.search).get('code');

const App = () => {

  const [composers, setComposers] = useState([]);

  useEffect(() => {
    const fetchComposers = async () => {
      const response = await fetch('composers.json');
      const data = await response.json();
      const listofComposers = data.composers.map((composer) => composer)
      setComposers(listofComposers);
    }
    fetchComposers();
  }, []);

  return (

      <Router>
        <Routes>
          <Route path='/' element={<Login code={code} />} />
          <Route path='/timeline' element={<Timeline composerData={composers} />} />
          <Route path='/results' element={<Results code={code}  />} />
        </Routes>
      </Router>
  
  );
}

export default App;

结果.jsx

export const Results = ({ code }) => {
  const accessToken = useAuth(code)
  console.log(accessToken)

当我 console.log(accessToken) 时，它返回未定义。

Answer 1

看看这个答案是否有助于调试错误： Unable to catch and log the Error response from an axios request

所以本质上 catch(error => ) 实际上只是 catch(response => )

尝试console.log(err.response.data)

Answer 2

Connection Refused 表示您的应用程序未在 localhost 上的端口 3001 上侦听。 Chrome 正在尝试连接到它，但无法连接。

（发送 TCP SYN 数据包并遇到 TCP RST，但这与您的问题无关）

尝试改变你的app.listen看看会发生什么：

server.listen(3001, 'localhost'); // or server.listen(3001, '0.0.0.0'); for all interfaces
server.on('listening', function() {
    console.log('Express server started on port %s at %s', server.address().port, server.address().address);
});

还有一个有趣的问题：你确定你运行了你的应用程序吗？ 特别是 js 文件server.js ...

因为如果它没有运行，它肯定不能监听任何端口，更不用说 3001。

在 powershell 中使用TCPView或Get-NetTCPConnection验证它是否正在运行并侦听正确的端口