Блог

Главная - Вопросы по программированию - React не может получить данные из Express

React не может получить данные из Express

#javascript #mysql #reactjs #express

Вопрос:

Я учусь React , и Express с учетом сказанного я работаю над своим учебным приложением, которое просто берет данные, MySQL а затем визуализирует их.

Итак, я сделал простой экспресс-сервер с маршрутизатором:

 //controllers.js const getData = async (SQL) =gt; {  try {  const data = await new Promise((resolve, reject) =gt; {  pool.query(SQL, (err, res) =gt; {  if (err) reject(err);  else resolve(res);  });  });  return data;  } catch (err) {  return err;  } };  //router.js  router.get("/CB/fridge01", (req, res, next) =gt; {  let sql = "SELECT * FROM fridge01";  getData(sql)  .then((result) =gt; res.json(result))  .catch((err) =gt; res.json(err)); });  //index.js app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());  app.use("/api", router);  app.get("/", (req, res) =gt; {  res.redirect("localhost:"   port   "/api/CB/fridge01"); });   app.listen(port, (error) =gt; {  error  ? console.log(`An error occurred: ${error}`)  : console.log(`The server has started at http://localhost:${port}`); });

А затем в моем компоненте react я просто использую componentDidMount для выполнения fecth api:

 componentDidMount() {  //192.168.88.169 is my local IP and port 8080 is setup in index.js  fetch("192.168.88.169:8080/api/CB/fridge01", { method: "GET" })  .then((res) =gt; {  res  .json()  .then((json) =gt; {  this.setState({ metrics: json });  })  .catch((err) =gt; console.log(err));  })  .catch((err) =gt; console.log(err)); }

и это дает мне ошибку в консоли, говоря: SyntaxError: Unexpected token lt; in JSON at position 0

Когда я открываю свой экспресс с curl postman помощью браузера или даже браузера, я получаю те же данные:

 [{"id":1,"recorded":"2021-11-22T11:16:22.000Z"}]

это всего лишь примеры данных, которые я жестко закодировал в таблицу БД

Спасибо вам за вашу помощь и терпение и, пожалуйста, извините за мои грамматические навыки.

Комментарии:

1. В браузере откройте консоль / инспектор (F12 / Ctrl Shift I / Проверьте это), перейдите на вкладку «Сеть» и проверьте ответ. Очень возможно, что вы пропустили один из заголовков. Кстати: Почему ты спускаешься вниз then() и приближаешься к обратному вызову-черт возьми. Используйте цепочку .then(reap=gt;resp.json()).then(json=gt; {this.setState({ metrics: json })} ).catch(/*only one*/)

2. Я учусь чему-то, совершая подобные ошибки, никогда раньше не использовал обещания async/await. Итак, я открыл network часть консоли и угадайте, что я нашел, выборка URL-адреса, из которой поступают данные, заключается в следующем: http://localhost:3000/192.168.88.169:8080/api/CB/fridge01 это полная чушь, я исправил это, введя протокол перед запрошенным IP fetch(http://....) .Теперь я получаю ошибку Cors (я исправил это с помощью: res.header("Access-Control-Allow-Origin", "*"); ). Теперь все работает, спасибо. В любом случае, как мне закрыть этот вопрос?

Ответ №1:

fetch На стороне реакции возникла проблема с API. Вместо того, чтобы получать данные из 192.168.88.169:8080/... , я получал из localhost:3000/192.168...

Чтобы исправить это, я включил http протокол в выборку URL-адреса. ( fetch("http://192...") )

Тогда я просто разрешил CORS и вуаля!

Метки: