Nikulio
@Nikulio
NaN !== NaN

Почему получаю «Uncaught SyntaxError: Unexpected token» при отдаче html-файла?

Всем привет!
Фронт на Реакте, бэк Экспресс.

Если ставлю так, то все работает:

const buildPath = path.join(__dirname, "../../dist");
const buildIndexPath = path.join(__dirname, "../../dist/index.html");

app.use(express.static(buildPath));
app.get("*", (req, res) => {
	res.sendFile(buildIndexPath);
});


Но есть меняю местами .get() c .static то получаю ошибку:

app.get("*", (req, res) => {
	res.sendFile(buildIndexPath);
});
app.use(express.static(buildPath));


Uncaught SyntaxError: Unexpected token <
Якобы ругается на !doctype.
Почему так?
Спасибо
  • Вопрос задан
  • 2127 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Ошибка не при отдаче html файла. Он без проблем отдается. Во втором случае проблемы со статикой. express.static это middleware(промежуточное ПО). Express все запросы обрабатывает по-порядку через все middleware пока не найдет подходящий endpoint. В первом случае express.static обрабатывает пути до роутера, перехватывая только запросы за статическими файлами и возвращая файлы в ответ. Во втором случае эти запросы попадают в роутер, который у вас обрабатывает все пути и возвращает index.html. До express.static запросы не доходят и вместо всей статики вы получаете этот файл и парсер JS выдает ошибку.

Простой пример:
app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});
app.use(express.static(__dirname + '/public'));
app.get("/about", (req, res) => { /* */}); // ( 1 )
app.get("/home", (req, res) => { /* */});  // ( 2 )
app.get("*", (req, res) => { /* */}); // ( 3 )
app.get("/never", (req, res) => { /* */}); // ( 4 )

Допустим приходит 4 запроса:
GET https://site/public/img/1.png
GET https://site/home
GET https://site/feed
GET https://site/never

Во всех случаях в консоли покажется: Time: <текущее время>
Первый запрос будет перехвачен express.static и не дойдет до роутера.
Второй запрос будет перехвачен эндпоинтом ( 2 ), ( 1 ) будет пропущен так как пути не совпадают.
Третий эндпоинтом ( 3 ), так как он перехватывает абсолютно все запросы которые до него доходят, ( 1 ) и ( 2 ) соответственно пропущены.
Четвертый запрос так же будет перехвачен и обработан эндпоинтом ( 3 )
До эндпоинта ( 4 ) запросы дойти не могут. Его надо поменять местами с ( 3 )
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы