У меня есть приложение nodejs и react js, и я получаю сообщение об ошибке SyntaxError: Unexpected token '<', "<!DOCTYPE"... недействителен JSON
Я хочу отправлять данные с моей внутренней стороны с помощью nodejs на мою внешнюю сторону, когда я использую выборку на стороне внешнего интерфейса, я использую reactjs. и я получаю сообщение об ошибке «SyntaxError: Unexpected token '<', «<!DOCTYPE»… is not valid JSON» в функции выборки в функции useEffect.
import { useEffect, useState } from "react";
import Item from "./item";
import style from "./show-item.module.css";
const ShowItem = (props) => {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/")
.then((res) => {
if (res.ok){
console.info('ok')
return res.json()
}
}).then(result => console.info(result))
.catch((err) => console.info(err));
}, []);
return (
<ul className = {style["ul-item"]}>
{orders.map((item) => (
<Item
key = {item.id}
id = {item.id}
name = {item.name}
detail = {item.detail}
price = {item.price}
amount = {1}
/>
))}
</ul>
);
};
export default ShowItem;
Я использовал прокси в своем приложении js для реагирования в package.json
"proxy": "http://localhost:5000",
это мой внутренний код
const adminRouts = require('./routes/admin');
const shopRouts = require('./routes/shop');
const shefRouts = require('./routes/chef');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json(), bodyParser.urlencoded({ extended: false }));
const port = process.env.PORT || 5000;
app.use('/admin',adminRouts);
app.use('/shef', shefRouts);
app.use(shopRouts);
console.info('listen ', port)
app.listen(port);
мой шаф-код
const express = require("express");
const router = express.Router();
const order = [
{
id: 1,
name: "הלחם שלנו",
detail: "לחם פראנה באפייה מסורתית,שמן זית ומטבלים טעימים",
price: 26,
},
];
router.use("/", (req, res, next) => {
console.info('here');
res.json(order);
});
module.exports = router;
Ответы 1
Возвращается HTML, что указывает на то, что вызывается неправильный маршрут API
В первую очередь стоит отметить, что бэкенд отвечает HTML. Почему это? Если вы зарегистрируете свой экспресс-код, нет маршрута, по которому отправляется HTML. URL-адрес, который вы используете для выборки, — «/». Этот маршрут «/» получит базовый URL-адрес «localhost: 5000» и ничего больше. Похоже, вы делаете запрос к тому же URL-адресу, на котором размещен React. Это означает, что вы делаете запрос на получение папки «public/» в приложении реакции, и он возвращает HTML в «индексе» по умолчанию .html», который использует React.
Вам нужно будет изменить либо реагирующий прокси-сервер, либо базовый URL-адрес для сервера. Я рекомендую изменить все маршруты API, чтобы они добавлялись к '/api'. Таким образом, «/ shef» становится «/ api/ shef». Чтобы сделать его динамическим, создайте маршрутизатор API с конечной точкой «/api» и переместите «/ shef» в файл маршрутизатора API.
Хотя есть много способов сделать это, вот один из них:
создайте файл 'api.route.js' в папке '/routes'
const router = require("express").Router();
const shopRouts = require('./routes/shop');
const shefRouts = require('./routes/chef');
router.get("/", async (req, res, next) => {
res.send({ message: "Ok api is working 🚀" });
});
router.use('/admin',adminRouts);
router.use('/shef', shefRouts);
router.use('/shop', shopRouts);
module.exports = router;
код шахты
const apiRoutes = require('./routes/api');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json(), bodyParser.urlencoded({ extended: false }));
const port = process.env.PORT || 5000;
app.use('/api', apiRoutes);
console.info('listen ', port)
app.listen(port);
Затем в вашем интерфейсе:
Здесь изменена только одна строка: Используйте любой метод, который вам нравится, чтобы получить базовый URL-адрес. Возможно, вы захотите сохранить его в файле .env.
fetch(window.location.origin + "/api/shef")
import { useEffect, useState } from "react";
import Item from "./item";
import style from "./show-item.module.css";
const ShowItem = (props) => {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch(window.location.origin + "/api/shef")
.then((res) => {
if (res.ok){
console.info('ok')
return res.json()
}
}).then(result => console.info(result))
.catch((err) => console.info(err));
}, []);
return (
<ul className = {style["ul-item"]}>
{orders.map((item) => (
<Item
key = {item.id}
id = {item.id}
name = {item.name}
detail = {item.detail}
price = {item.price}
amount = {1}
/>
))}
</ul>
);
};
export default ShowItem;
я имею в виду, ты принес
/, а не/shaf/.