Почему я не могу получить данные с помощью fetch?
если я пишут таким синтаксисом то data у меня не пустая
const Spisok = () => { const token = localStorage.getItem("token") const [user, setUser] = useState([]) useEffect(()=> { fetch('https://jsonplaceholder.typicode.com/users', { method: 'GET', headers: { "Content-Type": "application/json", 'Authorization': `Bearer ${token}` }, }).then((res) => res.json()).then((data) => { setUser(data) }) }, []) return ( <> { user.map((u) => { return ( <div> <p>{u.name}</p> </div> ) }) } </> ) } export default Spisok |
const Spisok = () => { const token = localStorage.getItem("token") const [user, setUser] = useState([]) useEffect(()=> { fetch('https://jsonplaceholder.typicode.com/users', { method: 'GET', headers: { "Content-Type": "application/json", 'Authorization': `Bearer ${token}` }, }).then((res) => res.json()).then((data) => { setUser(data) }) }, []) return ( <> { user.map((u) => { return ( <div> <p>{u.name}</p> </div> ) }) } </> ) } export default Spisok
Если так то пустая потому что res тоже пустой
import { useEffect, useState } from "react" const Spisok = () => { const token = localStorage.getItem("token") const [user, setUser] = useState([]) useEffect(()=> { fetch('https://jsonplaceholder.typicode.com/users', { method: 'GET', headers: { "Content-Type": "application/json", 'Authorization': `Bearer ${token}` }, }).then((res) => { res.json() }).then((data) => { setUser(data) }) }, []) return ( <> { user.map((u) => { return ( <div> <p>{u.name}</p> </div> ) }) } </> ) } export default Spisok |
import { useEffect, useState } from "react" const Spisok = () => { const token = localStorage.getItem("token") const [user, setUser] = useState([]) useEffect(()=> { fetch('https://jsonplaceholder.typicode.com/users', { method: 'GET', headers: { "Content-Type": "application/json", 'Authorization': `Bearer ${token}` }, }).then((res) => { res.json() }).then((data) => { setUser(data) }) }, []) return ( <> { user.map((u) => { return ( <div> <p>{u.name}</p> </div> ) }) } </> ) } export default Spisok
Дополнительно:
.then((res) => { res.json() }) |
.then((res) => { res.json() })
коллбэк ничего не возвращает
Во втором варианте вы забыли вернуть результат res.json(), из-за чего data становится undefined. Добавьте return res.json() в первом .then().
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема возникла, скорее всего, из-за политики безопасности Same-Origin Policy (SOP). SOP предотвращает выполнение запросов к ресурсам, находящимся на другом домене, если сервер, на котором выполняется запрос, не разрешил такое действие.
Чтобы решить эту проблему, вам необходимо убедиться, что сервер, к которому вы пытаетесь отправить запрос, разрешил доступ к вашему домену. Это можно сделать путем настройки заголовков CORS (Cross-Origin Resource Sharing) на сервере.
Пример настройки заголовков CORS на сервере с использованием PHP:
header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type");
Этот код разрешает доступ ко всем ресурсам с любого домена, отправляющего запросы методами GET, POST и OPTIONS, с заголовком Content-Type.
Если у вас нет доступа к настройкам сервера, вы также можете использовать прокси-сервер, который будет отправлять запросы от вашего домена к другим ресурсам. Например, вы можете создать скрипт на PHP, который будет делать запросы к другим ресурсам и передавать данные обратно вашему клиентскому приложению.
Например, скрипт на PHP для прокси-сервера:
$url = $_GET['url']; $response = file_get_contents($url); echo $response;
Вызов этого скрипта будет выглядеть примерно так: proxy.php?url=https://example.com/data
Помимо этого, убедитесь, что ваш запрос правильно сформирован, используя правильный метод (GET, POST, PUT, DELETE и т.д.) и передавая правильные параметры, если необходимо. Проверьте также, что ваш URL корректен и не содержит ошибок.
Надеюсь, эти рекомендации помогут вам решить проблему с получением данных с помощью fetch. Если у вас остались вопросы, не стесняйтесь задавать.