Javascript-форум (https://javascript.ru/forum/)
-   Node.JS (https://javascript.ru/forum/node-js-io-js/)
-   -   Не получаю данные из node в react (https://javascript.ru/forum/node-js-io-js/85223-ne-poluchayu-dannye-iz-node-v-react.html)

riaron86 28.05.2023 18:06

удалил cors из сервера и клиента но все равно но все рано сервер блочит запрос.
host:3001/api' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3001' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
App.js:9
что переводится как
'https://localhost:3001 - это не соответствует указанному источнику происхождения. Попросите сервер отправить заголовок с допустимым значением или, если вам нужен непрозрачный ответ, установите режим запроса на "no-cors", чтобы получить ресурс с отключенным CORS.
App.js:9

GET http://localhost:3001/api net::ERR_FAILED 200 (OK)
(анонимный) @ 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
вот мой код
client 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('http://localhost:3001/api',)
            .then( res => res.json())
            .then (data => setData(data))
    }, []);
    console.log(data);

    return (
        <div className="App">
            <header className="App-header">
                <p>{!data ? "Loading..." : data}</p>
            </header>
        <Shop arrayse={arrayse}/>
        </div>
    )
}

export default App;

server index.js:
const express = require("express");
const PORT =  3001;

const app = express();

app.get("/api", (req, res) => {
    res.set('Access-Control-Allow-Origin', 'https://localhost:3001');

    res.json({ message: "Hello from server!" });
});


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

voraa 28.05.2023 18:21

Установите Access-Control-Allow-Origin: '*'
И не парьтесь

У вас пока все на localhost. У вас есть сертификат для него, что бы указывать https?

riaron86 28.05.2023 21:50

Спасибо, помогло! Но как будет правильнее написать для безопасности?

voraa 28.05.2023 22:39

С какого адреса приходит страница (какой url пишется в браузере)?
Тот же host должен быть указан в Access-Control-Allow-Origin.
Т.е сервер разрешает получать корс ответы страницам, вызванным с этого хоста.

Aetae 29.05.2023 10:31

riaron86, на продакшене у тебя скорее всего и клиент и сервер будут развёрнуты с одного адреса. Тогда просто надо будет убрать Access-Control-Allow-Origin и всё.


Часовой пояс GMT +3, время: 17:53.