Не получаю данные из node в react

[riaron86]

index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();
app.get("/api", (req, res) => {
    res.json({ message: "Hello from server!" });
});


app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

App.js

import React from "react";
import Shop from "./pages/Shop";

// client/src/App.js
function App({arrayse}) {
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
        fetch("/api")
            .then((res) => res.json())
            .then((data) => setData(data.message));
    }, []);
    return (
        <div className="App">
            <header className="App-header">
                <p>{!data ? "Loading..." : data}</p>
            </header>

        <Shop arrayse={arrayse}/>
        </div>
    )
}

export default App;

[ksa]

riaron86, у тебя АПИ и реакт крутятся на разных "серверах".

Таким образом ты не туда обращаешься

fetch("/api")

Скорее всего сервер будет доступен на http://localhost:3001/api

[riaron86]

React.useEffect(() => {
fetch('http://localhost:3001/api')
.then((res) => res.json())
.then((data) => setData(data.message));
}, []);
пишет failed to fetch

[Aetae]

Ты не можешь просто взять и запросить данные с другим origin с клиента, это небезопасно. Тебе либо надо добавить со стороны сервера заголовки access-control-allow-origin это разрешающие, либо настроить devserver proxy(есть их коробки в большинстве случаев), который будет проксировать прозрачно запросы с /api на сервер в процессе разработке.

Предпочтителен второй вариант, т.к. затрагивает только dev конфигурацию, не требуя изменения кода в последствии для прода.

[riaron86]

С этим я потом разберусь. Почему код не работает

[ksa]

пишет failed to fetch

Ты полностью покажи текст ошибки...

Почему код не работает

Ты в браузере, набирая УРЛ запроса, получаешь ответ от сервера?

На каком порту он у тебя запущен?

[riaron86]

При вводе localhost:3001 ответ получаю
вот ошибка

Uncaught runtime errors:
×
ERROR
Failed to fetch
TypeError: Failed to fetch
at http://localhost:3000/static/js/bundle.js:36:5
at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:27138:30)
at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:28631:17)
at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:28603:13)
at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:28593:11)
at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:28583:7)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:30468:7)
at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:30420:18)
at http://localhost:3000/static/js/bundle.js:30235:13
at workLoop (http://localhost:3000/static/js/bundle.js:37373:38)

[Aetae]

С этим я потом разберусь. Почему код не работает

Я написал "почему не работает", лол.
http://localhost:3001/ - это другой origin по сравнию с http://localhost:3000/ на котором у тебя крутится клиент. Незя слать запросы на другой origin без разрешения.

Также я написал как решить проблему. Первый вариант явно разрешит такое поведение. Второй сделает так что запрос /api(http://localhost:3000/api) будет прозрачно проксирован на http://localhost:3001/api devserver'ом.

[riaron86]

добавил строчку
res.set('Access-Control-Allow-Origin', 'http://localhost:3000');

const app = express();
app.get("/api", (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.json({ message: "Hello from server!" });
});

вот какие ошибки выдает
3000/api. URL scheme "localhost" is not supported.
(анонимный) @ App.js:9
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(анонимный) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
App.js:9

Uncaught (in promise) TypeError: Failed to fetch
at App.js:9:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
at commitPassiveMountEffects (react-dom.development.js:24866:1)
at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
at flushPassiveEffects (react-dom.development.js:26984:1)
at react-dom.development.js:26769:1
at workLoop (scheduler.development.js:266:1)
(анонимный) @ App.js:9
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(анонимный) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Promise.then (асинхронно)
(анонимный) @ App.js:9
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(анонимный) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

[ksa]

"localhost" is not supported

Замени на ИП адрес 127.0.0.1