#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
это полная чушь, я исправил это, введя протокол перед запрошенным IPfetch(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 и вуаля!