我正在構建將 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) 時，它回傳未定義。
uj5u.com熱心網友回復：
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驗證它是否正在運行并偵聽正確的埠
uj5u.com熱心網友回復：
看看這個答案是否有助于除錯錯誤：Unable to catch and log the Error response from an axios request
所以本質上 catch(error => ) 實際上只是 catch(response => )
嘗試console.log(err.response.data)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472505.html
標籤：javascript 节点.js 反应