Прокси внешнее API -запросы в next.js 15Javascript

Форум по Javascript
Ответить
Anonymous
 Прокси внешнее API -запросы в next.js 15

Сообщение Anonymous »

Я работаю над приложением Next.js 15, которое интегрируется с внешним API (на отдельном бэкэнд -сервере), и я сталкиваюсь с проблемами с его правильной интеграцией. < /p>
Вот настройка: < /p>
Я создал пользовательский выборщик, по сути, экземпляр Axios, который обрабатывает: < /p>

Получение JWT из файлов cookie < /li>
Прикрепление токена к заголовку запроса для аутентификации бэкэнд < /li>
> Однако эта настройка работает только с компонентами сервера, поскольку я не могу получить доступ к файлам cookie на стороне клиента. Я подумал о создании отдельного выборщика для клиента, но синхронизация сеансов и токенов в обоих выборке и дублировании логики с переосмыслением токенов кажется громоздкой. маршруты JS API или действия сервера: < /p>

Действия сервера полезны для мутаций, но из -за последовательного выполнения они не кажутся идеальными для получения запросов. < / / li>
Маршруты API потребуют дублирующихся бэкэнд -конечных точек и обработки параметров и ответов, что кажется неэффективным. < /li>
< /ul>
Итак, я решил Чтобы попробовать прокси -запросы через api -маршруты. Я создал all-all-route/api/extred/[[... proxy]] со следующим кодом для пересылки запросов на внешний API (

Код: Выделить всё

serverFetcher
запросы):

Код: Выделить всё

import { NextRequest, NextResponse } from 'next/server';
import { serverFetcher } from '@libs/server-fetcher';

async function handler(request: NextRequest) {
const headers: Record = {};

request.headers.forEach((value, key) => {
headers[key] = value;
});

const response = await serverFetcher.request({
url: request.url.replace(request.nextUrl.origin + '/api/external', ''),
method: request.method,
data: request.body,
headers,
});

const responseHeaders: Record = {};
Object.entries(response.headers).forEach(([key, value]) => {
responseHeaders[key] = value;
});

return NextResponse.json(response.data, {
status: response.status,
statusText: response.statusText,
headers: responseHeaders,
});
}

export const dynamic = 'force-dynamic';

export {
handler as GET,
handler as POST,
handler as DELETE,
handler as PATCH,
handler as PUT
};
< /code>
И вот как я планировал его использовать: < /p>
export const clientFetcher: HttpClient = axios.create({
baseURL: '/api/external'
});

const srProductsService = new ProductsService(serverFetcher); // 
 Вопросы < /strong>: < /p>

 Может ли кто -нибудь помочь мне устранить эту проблему с ответом 304? < /li>
 Каков ваш подход к интеграции next.js с внешними сторонними API при эффективной обработке JWT и сеансах? < /li>
 У вас есть какие-либо рекомендации для Улучшение этой настройки прокси, и видите ли вы какие -либо потенциальные недостатки этого подхода?> 

Подробнее здесь: [url]https://stackoverflow.com/questions/79393101/proxying-external-api-requests-in-next-js-15[/url]
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»