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

Question

[Nikita Shchypylov]

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

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

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.
Почему так?
Спасибо

Comments

[Lynn «Кофеман»]

Ну так а чего вы ожидали. Порядок имеет значение

[Nikita Shchypylov]

Алексей Тен, а чем именно тут порядок важен? Что именно второму варианту мешает работу самому?

Answer 1

[Антон Спирин]

Ошибка не при отдаче 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 )

Comments

[Nikita Shchypylov]

Большое спасибо, так гораздо понятнее :)