Не удалось получить данные из mongoDB, вместо данных я получаю HTML-шаблон.?

Question

[Alexander3928]

Хочу получить данные из mongoDB, коллекцию product, но вместо массива или объекта с данными, получаю HTML шаблон. С чем это может быть связано? База данных подключена, я проверил. Скриншоты ниже.

Сервер запускается по:

const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`listening on port ${port}...`))

model product

const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  title: String,
  price: Number,
  quantity: Number,
});

const Product = mongoose.model("products", productSchema);

module.exports = Product;

server

const express = require('express');
const app = express();
const Product = require("./models/Products");

app.get("/api/products", (req, res) => {
  Product.find((error, data) => {
    if (!error) {
      res.status(200).send(data);
    } else {
      res.status(500).send(error);
    }
  });
});

axios с клиентской части

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
});

export default axiosInstance;

client

useEffect(() => {
    const fetchData = async () => {
      const data = await axios.get("/api/products");
      console.log('product >>>', data);
    }
    fetchData();
  }, []);

mongoDB, collection product



screenshot

Comments

[Kentavr16]

а куда ты делаешь запрос? Сервер у тебя где запущен? Или это какая-то хитрая настройка? await axios.get("/api/products") вроде пытается локальный запрос сделать какой-то

[Kentavr16]

ааа, это ВЕСЬ код сервера? Тогда причина ясна. Он не запущен и не должен работать в принципе. Посмотри доки по экспресу

[Alexander3928]

Kentavr16, по локальному адресу http://localhost:8080/api/products, 8080 порт сервера. И в каком плане "Он не запущен и не должен работать в принципе"?

[вовчек]

Alexander3928, const data = await axios.get("localhost:8080/api/products");

[Alexander3928]

вовчек, пробовал,

GET http:// localhost:8080/api/products 500 (Internal Server Error)

[Kentavr16]

Alexander3928, вот самый первый пример из доков

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

[Kentavr16]

Alexander3928, вот этот ответ с ошибкой и намекает на то что сервер не здоров.

[szQocks]

Alexander3928, а откуда ты вообще знаешь что у тебя он работает на 8080 порту ? если ты нигде не указал порт ? я не вижу кода запуска типа - app.listen(8080)

[Alexander3928]

szQocks,

const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`listening on port ${port}...`))

[szQocks]

Alexander3928, тогда ещё момент, я хоть и не помню уже что там в mongoDB но мне кажется ты не верно возвращаешь ответ

Products.find((error, data) => {
    if (!error) {
      res.status(200).send(data);
    } else {
      res.status(500).send(error);
    }
  });

попробуй так

app.get("/api/products", (req, res) => {
res.send('Hello World!')
});

[вовчек]

Alexander3928, так у тебя же порт 3000, причем тут 8080?

[Kentavr16]

вовчек, так 3000 это фронт, 8080 это бэк

[вовчек]

Kentavr16, в том отрывке кода, который ты кинул, у тебя сервер на порту 3000 поднимается.

Answer 1

[Kentavr16]

Наконец дошло) Так как ты делаешь запрос на локальный адрес, await axios.get("/api/products") , аксиос ищет ресурс относительно корня проекта. У тебя был запущен локальный сервер разработки реакта, и он его поймал каким-то образом. Я сначала сам не понял в чем соль, но установил себе аксиос и сделал локальный запрос, с локальным путем как у тебя. Мне пришел ответ от работающего в данный момент сервера апач, также оформленный как HTML, с той только разницей что там писалось о том что ресурс не найден. Что забавно.

Comments

[Kentavr16]

короче правильно пиши URL и лечи сервер.

[szQocks]

Kentavr16, да там и в url была проблема, и в том что ответ не верно возвращал, он возвращал его из callback от product модели

[Kentavr16]

szQocks, меня озадачил "приходящий" html. Сейчас-то я понял что это штатная работа аксиоса. Благодаря этому в php-бекенде, например, можно делать запросы на локальные скрипты. Там такой путь будет валидным.

Answer 2

[Alexander3928]

Я нашел решение этой проблемы.
Model.find() больше не принимает callback, поэтому и возникает ошибка. Достаточно указать then после find, и все будет работать Model.find().then((data) => {}))

Comments

[szQocks]

хоть ты и написал

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
});

но по факту ты юзал

const data = await axios.get("/api/products");

это тоже является ошибкой, получается ошибок было несколько

[szQocks]

и кстати я не нашёл в mongodb инфу о том что find вообще принимает какую-то функцию, вообще на этапе когда ты кидал функцию в find там наверное должна ошибка вылететь была с текстом что параметр не тот который нужен ?

[Alexander3928]

szQocks,

и кстати я не нашёл в mongodb инфу о том что find вообще принимает какую-то функцию

это от mongoose.

[Alexander3928]

szQocks,

но по факту ты юзал

const data = await axios.get("/api/products");

Я и сейчас использую const data = await axios.get("/api/products");.
Я просто не заметил, что axios baseURL не был указан, и axios отправлял запрос по адресу

await axios.get("http://localhost:5173/api/products");

вместо http://localhost:8080/api/products

[szQocks]

Alexander3928,

это от mongoose.

в последней 8 версии тоже не нашёл инфу о функции, но все версии смотреть уж не буду, пофиг

const data = await axios.get("/api/products");

Я и сейчас использую const data = await axios.get("/api/products");. Я просто не заметил, что axios baseURL не указал и он образался по адресу
await axios.get("localhost:5173/api/products");
вместо localhost:8080/api/products

да да, тогда вариант кентавра тоже является ответом на вопрос