I am new to Vue.js development and am attempting to call an api using a nodejs for my backend. When I check the console after running the app I am expecting to receive a proxy with an empty name variable within but I receive the errors seen below in the picture. Image of error in console

My JS inside my APP.VUE file is:

import axios from 'axios';
  export default {
    data() {
      return {
        baseApiUrl: 'http://localhost:4000/api',
        stock: {
          name:''
        },
        Stocks: {},
        StocksList: {

        }
      }
    },
    created (){
      this.getStocks()
    },
    methods: {
      getStocks() {
        axios.get(this.baseApiUrl).then(res => {
          this.Stocks = res.data;
          let names = Array.prototype.map.call(this.Stocks, s=>s.name).toString();
          axios.get(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${names}&tsyms=USD,EUR&api_key=1857384eb534d30bc84db3e18bfa41915ce3955213e3f7a699c33a67c28101c1`).then(res => {
            this.StocksList = res.data
            console.log(this.StocksList)
          }).catch(error => {
            console.log(error)
          })
        })
      },
      handleSubmitForm() {
        axios.post(this.baseApiUrl   '/add-stock', this.stock).then(() => {
          console.log(this.stock)
          this.stock = {
            name:''
          }
          this.getStocks()
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }

And my JS in my app.js is:

let express = require('express'),
    database = require('./database'),
    bodyParser = require('body-parser');


// Connect mongoDB
const mongoose = require('mongoose')
mongoose.Promise = global.Promise;
mongoose.connect(database.db, {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => {
  console.log("Database connected")
 },
 error => { 
  console.log("Database could't be connected to:"   error)
 }
)

const stockEndPoint=require('../backend/routes/stock.route')
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));
const cors = require('cors')
const corsOptions = {
    credentials: true,
    origin: 'http://localhost:4000',  
    allowedHeaders: ['Content-Type'],
    optionsSuccessStatus: 200
  };
app.use(cors(corsOptions));

// API
app.use('/api', stockEndPoint)

// Create port
const port = process.env.PORT || 4000;                       
const server = app.listen(port, () =>{
  console.log('Connected to port '   port)
})

// Find 404
app.use((req, res, next) =>{
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next){
    console.error(err.message);
    if (!err.statusCode) err.statusCode = 500;
    res.status(err.statusCode).send(err.message);
});

My full code can be accessed at the github repo: Github Repo Feel free to contact or ask questions for further info as I am really struggling to solve this problem.

CodePudding user response：

ERR_CONNECTION_REFUSED means that the Vue app made a request to http://localhost:4000 but there was no server answering it on port 4000. This means the server programmed in your app.js is not running or not as intended. Please start it with node app.js and make sure no error message appears. You can test if the server runs by entering http://localhost:4000in your browser: If it is running, also called 'listening', there will be a different result than when entering http://localhost:3999. On the latter an error message like 'Connection refused' will appear.

If this doesn't work, check if the environment variable PORT is set by entering echo $PORT or on Windows echo %PORT%in your terminal.