Fetch возвращает «404 Not Found» при вызове существующей конечной точки Stripe после того, как я добавил next-intl
Итак, подведем итог: в настоящее время я создаю интернет-магазин React/Next и использую Stripe для обработки платежей. Stripe предоставляет сеансы оформления заказа, которые можно создавать на бэкэнде и автоматически перенаправлять пользователей на форму оплаты при создании.
Следует отметить следующее: я заставил его работать довольно хорошо сам по себе, но недавно я добавил языковую функцию в свое приложение, и внезапно моя конечная точка API, обрабатывающая эту проверку, не может быть вызвана и возвращает ошибку 404 не найдена. .
Моя папка API выглядит так:
api
-> checkout
-> route.ts
-> get-stripe-products
-> route.ts
-> stripe-webhook
-> route.ts
Я вызываю конечную точку оформления заказа на странице заказа, используя следующую функцию, которая активируется при нажатии кнопки:
const checkout = async () => {
await fetch("/api/checkout", {
method: "POST",
body: JSON.stringify({ products: cart }),
})
.then((response) => response.json())
.then((response) => {
if (response.url) {
//response.url contain the success or failure url from transaction
window.location.href = response.url;
}
});
};
теперь вот самая странная часть: пытаясь найти проблему, я поигрался со своими конечными точками, вызывая каждую из них в этой точной выборке, вот ответы, которые я получаю на вкладке сети (консоль F5) моей страницы:
-> fetch("api/checkout",...) :
Request URL: http://localhost:3000/api/checkout
Request Method: POST
Status Code: 404 Not Found
-> fetch("api/get-stripe-products,...) :
Request URL: http://localhost:3000/api/get-stripe-products
Request Method: POST
Status Code: 405 Method Not Allowed
(что нормально: get-stripe-product — это метод GET, по крайней мере 405 указывает, что при выборке найден файл)
-> fetch("api/stripe-webhook,...) :
Request URL: http://localhost:3000/api/stripe-webhook
Request Method: POST
Status Code: 200 OK
Я думал, что проблема могла заключаться в том, что папка API не была найдена, но это показывает обратное...
В общем, я не понимаю, почему кажется, что моя конечная точка оформления заказа не может быть найдена методом выборки.
Опять же, в моих версиях приложения до добавления обработки языков (с помощью next-intl) тот же фрагмент кода правильно инициирует сеанс проверки полосы, и я без каких-либо проблем перенаправляюсь на форму оплаты.
Что касается различий в коде между версиями моего приложения:
- фрагмент кода, который я показал, одинаков в разных версиях
- файл checkout/route.ts почти не изменился, я изменил только Success_url и Fail_url объекта Stripe.checkout.session; если бы ошибка была отсюда, я не думаю, что она вернула бы 404, а конкретную ошибку. И это не значит, что код внутри файла читается, поскольку при вызове конечной точки выдается ошибка 404.
Любая подсказка относительно того, что является причиной этого?
Ответы 1
Ну нашли проблему быстрее, чем ожидалось:
Немного подробнее о языковой реализации, которую я делаю, так как проблема была отсюда: При использовании next-intl все страницы, которые должны существовать на нескольких языках, должны быть помещены в папку [locale], что добавляет аргумент в URL-адреса (например: все страницы, которые были в https://domain/page, в моем случае становятся https://domain/fr/page)
Соответственно, я изменил URL-адрес успеха и неудачи в конечной точке проверки, которая вызывает мой checkout.session, поскольку мне нужно было адаптировать URL-адреса к исходному языку:
const session = await stripe.checkout.sessions.create({
line_items: stripeItems,
mode: "payment",
shipping_address_collection: {
allowed_countries: ["FR", "GB"]
},
success_url: `${pathOrigin}/${locale}/success`,
cancel_url: `${pathOrigin}/${locale}/failure`
})
где локаль инициируется строкой:
const locale = await getLocale()
где getLocale является внутренней функцией next-intl для получения параметра языка.
Что ж, оказывается, вы не можете использовать эту строку в конечных точках API... не знаю, как именно возникает проблема, но удаление этой строки мгновенно решило мою ошибку 404 not find.
Чтобы по-прежнему получить переменную локали, я изменил тело запроса на странице заказа, включив в него параметр локали:
const checkout = async () => {
await fetch("/api/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ products: cart , locale}),
})
С локалью, инициируемой:
const locale = useLocale();
Поскольку useLocale является интерфейсным эквивалентом getLocale.
Как извлечь свой запрос в api/checkout/route.ts:
const { products, locale } = await request.json();
Это означает, что проблема связана с next-intl... Мне любопытно, почему, черт возьми, возникла ошибка 404, но эй, надеюсь, что никто больше не потратит 4 часа на эту глупую проблему
Вам нужно будет отслеживать, как обрабатываются эти
/checkoutзапросы. Скорее всего, это ошибка в ваших файлах API/маршрута. Попробуйте удалить/отключить остальные, чтобы использовался толькоcheckout/route.ts, и убедиться, что вы можете следить за тем, что происходит.