Как решить err_connection_refused при вызове API с помощью Nodejs

Я новичок в разработке Vue.js и пытаюсь вызвать API, используя nodejs для своего бэкэнда. Когда я проверяю консоль после запуска приложения, я ожидаю получить прокси с пустой переменной имени внутри, но получаю ошибки, показанные ниже на рисунке. Изображение ошибки в консоли

Мой JS внутри моего файла APP.VUE:

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.info(this.StocksList)
          }).catch(error => {
            console.info(error)
          })
        })
      },
      handleSubmitForm() {
        axios.post(this.baseApiUrl + '/add-stock', this.stock).then(() => {
          console.info(this.stock)
          this.stock = {
            name:''
          }
          this.getStocks()
        }).catch(error => {
          console.info(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.info("Database connected")
 },
 error => { 
  console.info("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.info('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);
});

Мой полный код доступен в репозитории github: Репозиторий Github Не стесняйтесь обращаться или задавать вопросы для получения дополнительной информации, поскольку я действительно изо всех сил пытаюсь решить эту проблему.

Пожалуйста, обрежьте свой код, чтобы было легче найти вашу проблему. Следуйте этим рекомендациям, чтобы создать минимальный воспроизводимый пример.

Community 10.05.2022 21:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ERR_CONNECTION_REFUSED означает, что приложение Vue сделало запрос к http://localhost:4000, но сервер не ответил на него через порт 4000. Это означает, что сервер, запрограммированный в вашем app.js, не работает или работает не так, как предполагалось. Пожалуйста, начните его с node app.js и убедитесь, что не появляется сообщение об ошибке. Вы можете проверить, работает ли сервер, введя http://localhost:4000 в своем браузере: если он работает, что также называется «прослушиванием», результат будет другим, чем при вводе http://localhost:3999. На последнем появится сообщение об ошибке, например «Отказано в соединении».

Если это не работает, проверьте, установлена ​​ли переменная среды PORT, введя echo $PORT или в Windows echo %PORT% в терминале.

Привет, спасибо за вашу помощь. Я попытался запустить сервер, и при входе на локальный хост в браузере пишет «Не найдено». Я не знаю, проблема в том, как я запустил приложение, или в самом коде, но по какой-то причине сервер не запускается.

virochaan RG 10.05.2022 22:54

@virochaanRG Да, но тогда сервер работает, это эффект // Find 404 app.use((req, res, next) =>{ next(createError(404)); }); в вашем app.js. Теперь снова зайдите в свое приложение vue, по адресу 10.0.0.200, судя по скриншоту.

cachius 10.05.2022 23:08

Другие вопросы по теме