Next.js не отправляет файлы cookie с запросом на выборку, даже если включены учетные данные
Я работаю над приложением Next.js, которое изначально было обычным приложением для реагирования (созданным с помощью приложения create-react-app), и я пытаюсь отправить файлы cookie с запросом на выборку на мой сервер. Однако файлы cookie не отправляются, хотя я установил учетные данные: «включить» в моих параметрах выборки.
Точно такой же код работает в «не» приложении Next js.
Я также включил опцию «использовать клиент». Файлы находятся в новой папке «приложение» из следующей версии 13.
ОБНОВЛЕНИЕ 1: Вот какой код я использовал:
async function getToken() {
const res = await fetch(
'http://localhost:8080/api/auth/token', {
credentials: 'include'
}
);
if (!res.ok) {
return null;
}
return res.json();
}
export default async function Component({
children
}) {
const tokenData = getToken();
const token = await tokenData;
/* some other code */
return {
children
}
}ОБНОВЛЕНИЕ 2. Основываясь на информации, полученной от edgefish, и дальнейших экспериментах, я признаю, что в версиях Next.js до 12 можно использовать такие методы, как getServerSideProps. Однако с момента появления папки «приложение» в Next.js 13 эти методы больше не работают в самой папке «приложение» (см. эту ссылку ). Мне любопытно узнать, есть ли способ включить файлы cookie в запрос на выборку в Next.js 13 с использованием компонента на стороне сервера. Хотя можно получить файл cookie, отправленный клиентом, с помощью метода файлов cookie (см. эту ссылку), я не знаю, как включить этот файл cookie в последующий запрос на выборку. Обратите внимание, что использование учетных данных: 'include' неэффективно, если компонент является компонентом сервера.
Ответы 2
Если вы хотите отправить учетные данные для получения в проекте nextjs,
Вы должны использовать рендеринг на стороне клиента (CSR)
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const YourPage = () => {
const { data, error, isLoading } = useSWR(`https://.../data`, fetcher);
return (
<div>{JSON.stringify(data)}</div>
);
};
ИЛИ
Если вы хотите рендеринга на стороне сервера (SSR).
Вы можете использовать проект getServerSideProps в nextjs, вы можете поставить лайк...
import type { GetServerSidePropsContext } from 'next';
export async function getServerSideProps(context: GetServerSidePropsContext) {
const { cookie } = context.req.headers;
// Fetch data from external API
const res = await fetch(`https://.../data`, {
headers: { Cookie: cookie },
});
const data = await res.json();
// Pass data to the page
return { props: { data } };
}
Чтобы включить файлы cookie в Next 13 на стороне сервера:
Прочитайте файлы cookie запроса с помощью функции cookie.
Добавьте заголовок
Cookieв запрос на выборку на стороне сервера.
import { cookies } from "next/headers";
async function getData() {
const response = await fetch(process.env.API_ENDPOINT, {
headers: {
Cookie: cookies()
.getAll()
.map(({ name, value }) => `${name}=${value}`)
.join("; "),
},
});
return await response.json();
}
Может быть полезно опубликовать фрагмент кода, который вызывает у вас затруднения.