Post Request net::ERR_CONNECTION

I'm building React/Redux/Node app that incorporates Spotify's API with authorization code flow. It's a SPA with React-Router that has three routes: Login, Timeline, and Results. When traversing from Timeline to Results, I get this error:

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

Here is the Github repo.

Here is a video of the error with Chrome DevTools open.

useAuth.jsx (custom hook)

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

server.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)

App.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;

Results.jsx

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

When I console.log(accessToken), it returns undefined.

CodePudding user response：

Connection Refused means your app isn't listening on port 3001, on localhost. Chrome is trying to connect to it, but can't.

(A TCP SYN packet is sent and met with a TCP RST, but this is not relevant to your question)

try changing your app.listen to this and see what happens:

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

also, a bit of a funny question: are you sure you ran your app? specifically the js file server.js...

because if it isn't running it most certainly can't be listening on any port, let alone 3001.

verify it's running and listening on the correct port using TCPView or Get-NetTCPConnection in powershell

CodePudding user response：

See if this answer helps to debug the error: Unable to catch and log the Error response from an axios request

So essentially catch(error => ) is actually just catch(response => )

Try to console.log(err.response.data)