удалил 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}`); }); |
Установите Access-Control-Allow-Origin: '*'
И не парьтесь У вас пока все на localhost. У вас есть сертификат для него, что бы указывать https? |
Спасибо, помогло! Но как будет правильнее написать для безопасности?
|
С какого адреса приходит страница (какой url пишется в браузере)?
Тот же host должен быть указан в Access-Control-Allow-Origin. Т.е сервер разрешает получать корс ответы страницам, вызванным с этого хоста. |
riaron86, на продакшене у тебя скорее всего и клиент и сервер будут развёрнуты с одного адреса. Тогда просто надо будет убрать Access-Control-Allow-Origin и всё.
|
Часовой пояс GMT +3, время: 08:26. |