Início / coding / Perguntas / 78246503
Accepted
user101289
Asked: 2024-03-30 08:53:10 +0800 CST

Passando credenciais de autenticação na chamada de API do lado do servidor nextjs

  • 772

Estou usando o pacote inicial Laravel brisa-next nextjs para criar um aplicativo nextjs com um back-end desenvolvido por laravel e protegido por sanctum.

Laravel espera um valor de cabeçalho CSRF e um cookie de sessão. Não estou tendo problemas para definir esses valores nos componentes do cliente e recuperar dados do laravel usando algo assim:

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);
}

Quando tento fazer uma solicitação de API em um componente do servidor fazendo algo semelhante, ele falha sempre com um 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);
}

Observe que isso é basicamente exatamente o que estou fazendo com as mesmas chamadas via Postman, e elas funcionam conforme o esperado.

Alguém pode apontar o que estou fazendo de errado?

javascript

2 respostas

  1. Best Answer

    Next.js's cookies().get(key)não retorna o valor real do cookie. Ele retorna objeto de {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);
}
    • 0

  2. Obrigado ao @Ahmed pela ajuda, ele me colocou no caminho certo. A ligação completa que eu precisava fazer era a seguinte:

    async function fetchDataServerSide(url: string): Promise<Response> {
    '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",
            "cookie": "XSRF-TOKEN=" + cookies().get('XSRF-TOKEN').value + ";breezeapi_session="+cookies().get('breezeapi_session').value,
        }
    }

    return await fetch(fetch_path, options);
}

    Quando despejei o objeto de solicitação no middleware laravel, o cookiecabeçalho foi convertido em uma matriz de cookies real.

    • 0

relate perguntas