javascript - Post Request net::ERR_CONNECTION_REFUSED - Stack Overflow

admin管理员组

文章数量:1332330

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 [posers, setComposers] = useState([]);

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

  return (

      <Router>
        <Routes>
          <Route path='/' element={<Login code={code} />} />
          <Route path='/timeline' element={<Timeline poserData={posers} />} />
          <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.

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 [posers, setComposers] = useState([]);

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

  return (

      <Router>
        <Routes>
          <Route path='/' element={<Login code={code} />} />
          <Route path='/timeline' element={<Timeline poserData={posers} />} />
          <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.

• javascript
• node.js
• reactjs

Share Improve this question Follow edited May 11, 2022 at 20:56 samwstout asked May 11, 2022 at 19:38 samwstoutsamwstout 6011 gold badge11 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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)

本文标签： javascriptPost Request netERRCONNECTIONREFUSEDStack Overflow