Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2023, 20:20
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 77

Не получаю данные из node в react
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;
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2023, 22:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,232

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

Таким образом ты не туда обращаешься
Сообщение от riaron86
fetch("/api")

Скорее всего сервер будет доступен на http://localhost:3001/api
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2023, 09:41
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 77

React.useEffect(() => {
fetch('http://localhost:3001/api')
.then((res) => res.json())
.then((data) => setData(data.message));
}, []);
пишет failed to fetch
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2023, 10:59
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

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

Предпочтителен второй вариант, т.к. затрагивает только dev конфигурацию, не требуя изменения кода в последствии для прода.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2023, 11:43
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 77

С этим я потом разберусь. Почему код не работает
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2023, 11:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,232

Сообщение от riaron86
пишет failed to fetch
Ты полностью покажи текст ошибки...

Сообщение от riaron86
Почему код не работает
Ты в браузере, набирая УРЛ запроса, получаешь ответ от сервера?

На каком порту он у тебя запущен?
Ответить с цитированием
  #7 (permalink)  
Старый 19.05.2023, 13:16
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 77

При вводе 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)
Ответить с цитированием
  #8 (permalink)  
Старый 19.05.2023, 14:55
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

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

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

Последний раз редактировалось Aetae, 19.05.2023 в 15:01.
Ответить с цитированием
  #9 (permalink)  
Старый 19.05.2023, 16:53
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 77

добавил строчку
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
Ответить с цитированием
  #10 (permalink)  
Старый 19.05.2023, 17:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,232

Сообщение от riaron86
"localhost" is not supported
Замени на ИП адрес 127.0.0.1
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
или не умею передавать данные между родителем и дочерним или не знаю useConext riaron86 Другие библиотеки 3 28.12.2022 15:42
Ищу senior full-stack на Node + React в Москве slimerock Работа 1 18.08.2020 18:36
Как правильно отрендерить данные на react с разрывом? s24344 Элементы интерфейса 0 28.01.2019 19:35
Линейный список в js artem55555p Элементы интерфейса 2 27.05.2018 12:52
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29