Вызовы API-вызовов завершаются неудачно после реализации универсального решения для экспресс-маршрутизации: неожиданный токен <в JSON в позиции 0 - PullRequest
0 голосов
/ 06 июня 2018

Я работаю над проектом React, и после запуска описанной здесь проблемы: URL-адреса React-маршрутизатора не работают при обновлении или записи вручную Я реализовал решение "Catch-All", предложенное вэта ссылка.

app.use("/", express.Router());
app.get("*", function (req, res) {
    res.sendFile(path.resolve(__dirname + "/../build/index.html"));
});

Это решило мою проблему с обновлением, но прервало все мои fetch звонки.Например:

fetch("http://localhost:3000/api/login", {
    method: "GET",
    headers: {
        "username": user.value,
        "password": pass.value,
    }
})
    .then(response => response.json())
    .then(function(data) {
        console.log(data)
    })

Что работает нормально, если я закомментирую вышеприведенные строки app.use и app.get, дает мне ошибку:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Я думаю, что обещание вернулосьresponse.json() отклоняется, основываясь на некоторой отладке console.log, которую я сделал.Однако, похоже, что response одинаково независимо от того, закомментирую ли я эти строки.Поэтому я не уверен, почему это не получится.

1 Ответ

0 голосов
/ 06 июня 2018

В следующей строке вы подключаете пустой маршрутизатор к / маршруту.

app.use("/", express.Router());

Таким образом, когда ваш клиент нажимает /api/login, он не может соответствовать ни одному маршруту.Следовательно, он обрабатывается *, который отправляет html файл.

Так как /api/login возвращает файл html с сообщением 200, fetch пытается выполнить json-анализ html ответ.Таким образом, fetch выдает ошибку.

Решение:

app.use("/", // valid router);

...