У меня есть следующее. js приложение реакции, работающее на пользовательском Express сервере с пользовательскими маршрутами. Я работаю над этим проектом самостоятельно, но я надеюсь, что в какой-то момент у меня может быть соавтор, и поэтому моя главная цель на самом деле просто очистить вещи и сделать все более разборчивым.
Как таковой Я пытался переместить как можно большую часть Express логов маршрутизации c во встроенную Next. js api routs . Я также пытаюсь заменить все мои fetch вызовы axios запросами, так как они выглядят менее многословно.
// current code
const data = await fetch("/api/endpoint", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ foo: "bar" })
}).then(x => x.json());
// what I'd like
const data = await axios.post( "/api/endpoint", { foo: "bar" });
Проблема, с которой я столкнулся, заключается в том, что Dynami c далее. js API-маршруты останавливаются, как только в теле появляются данные JSON. Я даже не получаю сообщение об ошибке, запрос просто застревает как «ожидающий решения», и обещание ожидания никогда не разрешается.
Я получаю ответы на эти вызовы, но не могу передать данные, которые мне нужны:
// obviously no data passed
const data = await axios.post( "/api/endpoint");
// req.body = {"{ foo: 'bar' }":""}, which is weird
const data = await axios.post( "/api/endpoint", JSON.stringify({ foo: "bar" }));
// req.body = "{ foo: 'bar' }" if headers omitted from fetch, so I could just JSON.parse here, but I'm trying to get away from fetch and possible parse errors
const data = await fetch("/api/endpoint", {
method: "POST",
// headers: { "Content-Type": "application/json" },
body: JSON.stringify({ foo: "bar" })
}).then(x => x.json());
Если я попытаюсь позвонить axios.post("api/auth/token", {token: "foo"}), запрос просто застрянет как ожидающий и никогда не будет решен.
Сетевая панель Chrome дает мне следующую информацию для заблокированного request:
General
Request URL: http://localhost:3000/api/auth/token
Referrer Policy: no-referrer-when-downgrade
Request Headers
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es;q=0.8
Connection: keep-alive
Content-Length: 26
Content-Type: application/json;charset=UTF-8
Cookie: token=xxxxxxxxxxxxxxxxxxxx; session=xxxxxxxxxxxxxxxxxxxxxxx
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/dumbtest
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
Request Payload
{token: "foo"}
Я пытался выяснить, что может быть причиной этого, и, похоже, все указывает на то, что существует проблема с предварительными запросами, но, поскольку они связаны с политиками CORS, я не не понимаю, почему я столкнулся с ними. Я делаю запрос от http://localhost:3000 до http://localhost:3000/api/auth/token.
Несмотря на это, я попытался добавить промежуточное ПО cors, как показано в примере next. js , но это не имеет значения. Насколько я могу судить, запрос даже не попадает на сервер - у меня есть console.log вызов в качестве первой строки в обработчике, но он никогда не запускается этими запросами.
Есть ли что-то очевидное Я скучаю? Такое ощущение, что это должен быть простой переход, но я провел последние полтора дня, пытаясь выяснить это, но я продолжаю достигать одной и той же точки с каждым решением, которое я пробую - глядя на серый ожидающий запрос в моем Вкладка «Сеть» и консоль сообщают об отсутствии ошибок или чего-либо еще.