在 nextjs 服务器端 api 调用中传递身份验证凭据

Question

我正在使用 Laravel breeze-next nextjs 入门包来创建一个 nextjs 应用程序，其后端由 laravel 提供支持并受 sainttum 保护。

Laravel 需要一个 csrf 标头值和一个会话 cookie。我在客户端组件中设置这些值并使用类似这样的方法从 laravel 获取数据没有问题：

async function fetchData(url: string): Promise<Response> {
    let fetch_path = process.env.NEXT_PUBLIC_BACKEND_URL + '/api/' + url
    console.log('fetch data called')

    const options: RequestInit = {
        method: "GET",
        credentials: "include",
        headers: {
            "Accept": "application/json",
            "Referer": process.env.APP_URL,
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
        }
    };

    return await fetch(fetch_path, options);
}

当我尝试在服务器组件中发出 API 请求时，执行类似的操作，每次都会失败，并显示 401：

async function fetchDataServerSide(url: string) {
    'use server'
    let fetch_path = process.env.NEXT_PUBLIC_BACKEND_URL + '/api/' + url

    const options: RequestInit = {
        method: "GET",
        headers: {
            "Accept": "application/json",
            "Referer": process.env.APP_URL,
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": cookies().get('XSRF-TOKEN'),
        }
    };

    return await fetch(fetch_path, options);
}

请注意，这基本上正是我通过 Postman 进行相同调用所做的事情，并且它们按预期工作。

谁能指出我做错了什么？

Answer 1

Next.js

的

cookies().get(key)

不返回 cookie 的实际值。它返回

{name: string, value: string}

的对象。

async function fetchDataServerSide(url: string) {
    'use server'
    let fetch_path = process.env.NEXT_PUBLIC_BACKEND_URL + '/api/' + url

    const options: RequestInit = {
        method: "GET",
        headers: {
            "Accept": "application/json",
            "Referer": process.env.APP_URL,
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": cookies().get('XSRF-TOKEN').value, // ⬅️⬅️⬅️⬅️
        }
    };

    return await fetch(fetch_path, options);
}