Не могу получить данные с сервера(node.js + express), на клиенте через fetch API

Question

Данные приходят, но они перерисовывают страницу, и я вижу json структуру

Как я могу получить { data: data } на клиенте, используя fetch(), из метода res.render () сервера?

1) рендерится стр.

2) вызывется fetch(), данные(data) пришли с сервера

3) хочу ими манипулировать в DOM

Через socket-io все работает. (код не буду показывать)

Server.js

let PORT = process.env.PORT || 5000;
const express = require('express');
const app = express();
const server = require('http').createServer(app);

// not matter
app.set('views', './views');
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.json());

// this
const data = { 
  array: [1, 2, 3], 
  string: 'string' 
};
app.get('/', function(req, res) {
  res.json(data)
});

index.ejs(html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>

  fetch('/')
    .then(res => {
      return res.json();
    })
    .then(obj => console.log(obj));

    </script>
  </body>
</html>

Answer 1

Вы не запускали сервер не было строки app.listen в сервере, а в клиентской части указывать нужно полный путь fetch('http://localhost:5000/') а не "/", попробуйте так должно работать:

let PORT = process.env.PORT || 5000;
const express = require('express');
const app = express();
const server = require('http').createServer(app);

// not matter
app.set('views', './views');
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.json());
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
// this
const data = {
    array: [1, 2, 3],
    string: 'string'
};
app.get('/', function(req, res) {
    res.json(data)
});

app.listen(PORT, function () {
    console.log("port: " + PORT)
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
<script>

    fetch('http://localhost:5000/')
        .then(res => {
            return res.json()
        })
        .then(obj => console.log(obj));

</script>
</body>
</html>

Answer 2

Мой код работает правильно.

Проблема в том, что я беру данные с места где я нахожусь.

Пример: я нахожусь на этой странице - localhost/page, а пытаюсь получить данные с этого же места:

app.get(/page, function (req, res ) {
   res.json(data);
})

и выходит, что сначала я получаю данные с сервера и метод res.json() отправляет его и отрисовывает эти данные на странице, и все, дальше ничего.

Если мне надо что то получить то, я прописал бы;

app.get(/page/data, function (req, res ) {
   res.json(data);
});

Готовый код

// рендерим страницу где хотим получить данные
app.get('/', function(req, res) {
  res.render('index');
});

// данные
const data = { 
  array: [1, 2, 3], 
  string: 'string' 
};

// где берем данные
app.get('/data', function(req, res) { // <---
  res.json(data);
});

fetch('/data') // <---
  .then(res => {
    return res.json();
  })
  .then(obj => console.log(obj));

Запускаем сервер, идем на страницу localhost/, открываем консоль, и бам!

БЛОГ НА HUSL

Не могу получить данные с сервера(node.js + express), на клиенте через fetch API

Ответы (2 шт):

Готовый код