Next.js: A rota da API Next.js 9 funciona em Get Request, mas não em Post request

Criado em 14 jul. 2019  ·  23Comentários  ·  Fonte: vercel/next.js

Pergunta sobre Next.js

Tento modificar algumas das APIs para usar post em vez de get.
Eu tenho um código de solicitação como este com busca normal

 const response = await fetch(`${process.env.SERVER}/api/lyric?id=${song.song_id}`);

Ele vai chegar ao arquivo dentro de ./page/api e resolver, no entanto, se eu mudar para o código a seguir

 const response = await fetch(`${process.env.SERVER}/api/lyric`, {
                    method: 'POST',
                    body: JSON.stringify({id: song.song_id})
                });

Isso me dará 404 não encontrado. Eu me pergunto qual é o problema aqui?

Obrigado

Comentários muito úteis

Também vejo o 404 em nosso projeto com o seguinte:

const res = await fetch('/api/bookings', {
  method: 'POST',
  body: JSON.stringify({ hungry: true }),
  headers: {
    'Content-Type': 'application/json',
  },
})
const data = await res.json()

Não importa qual seja o conteúdo do arquivo api/bookings . Nunca será atingido. Estou usando now dev para executar o projeto no localhost

Atualizar
Descobri que funcionou bem com now dev mas não funcionou com meu arquivo server.js porque não lidei com solicitações de postagem. Se você simplesmente adicionar um manipulador para a solicitação de postagem, tudo funcionará bem:

server.post('*', (req, res) => {
  return handle(req, res)
})

Todos 23 comentários

Ei @ zluo01 , forneça uma reprodução completa, a partir do seu problema é difícil adivinhar o que pode estar errado. Você pode verificar o teste de integração para POST .

Você foi capaz de descobrir isso? A documentação para rotas de API é mínima e também estou recebendo uma resposta 404 para solicitações POST enviadas para uma rota que funcionou bem para solicitações GET

Você foi capaz de descobrir isso? A documentação para rotas de API é mínima e também estou recebendo uma resposta 404 para solicitações POST enviadas para uma rota que funcionou bem para solicitações GET

Desculpe, não, eu uso Obter e colocar coisas dentro dos cabeçalhos e não tenho tempo para produzir uma reprodução completa.

Alguma documentação sobre como lidar com o POST seria útil

@stoplion o que você gostaria de ter documentado? Você pode criar um problema seguindo o modelo de problema para ele?

Certo

Também vejo o 404 em nosso projeto com o seguinte:

const res = await fetch('/api/bookings', {
  method: 'POST',
  body: JSON.stringify({ hungry: true }),
  headers: {
    'Content-Type': 'application/json',
  },
})
const data = await res.json()

Não importa qual seja o conteúdo do arquivo api/bookings . Nunca será atingido. Estou usando now dev para executar o projeto no localhost

Atualizar
Descobri que funcionou bem com now dev mas não funcionou com meu arquivo server.js porque não lidei com solicitações de postagem. Se você simplesmente adicionar um manipulador para a solicitação de postagem, tudo funcionará bem:

server.post('*', (req, res) => {
  return handle(req, res)
})

@TommySorensen isso deve ser corrigido no último canário

Isso já foi respondido? Existe uma maneira de POSTAR para uma próxima rota de API v9?

Isso já foi respondido? Existe uma maneira de POSTAR para uma próxima rota de API v9?

sim. Apenas postar nas rotas da API funcionará bem. Use este exemplo e altere o get to post. Isso é o que eu fiz. Funcionou como um encanto 😉

@ huv1k alguma ideia sobre um lançamento?

Liberação @lifeiscontent de quê?

@ huv1k sobre quando a próxima versão do next.js sairá com esta correção

@lifeiscontent Não há bug para corrigir. Eu testei sozinho. O POST funcionará bem se você usar os exemplos do NextJS. É propriamente algo em seu aplicativo. Forneça um exemplo do código completo para que possamos ajudar na investigação 👍

fácil despreocupado
em seu _servidor personalizado_
Faz

server.use((req, res) => app.getRequestHandler()(req, res))

Repro:

npx create-next-app --example with-firebase-authentication with-firebase-authentication-app

Adicionar arquivo api / test.js

export default (req, res) => {
  console.log('api test', req.method)
  res.json('ok')
}

Adicionar manipulador de solicitação em server.js:

server.use((req, res) => app.getRequestHandler()(req, res))

Execute yarn dev (ou node server.js )

Envie o POST para http: // localhost : 3000 / api / test

Esperado: registros do console api test POST
Real: sem registros, a solicitação permanece pendente até o tempo limite

Você precisa atualizar o exemplo:

  server.get('*', (req, res) => {
    return handle(req, res)
  })

precisa ser:

  server.all('*', (req, res) => {
    return handle(req, res)
  })

Nosso erro foi encontrado: atualizando isomorphic-unfetch => NÃO ATUALIZAR 🤕

A propósito, a dependência do Firebase é bastante antiga:

 firebase             ^5.6.0  →    ^7.2.1
 firebase-admin       ^5.8.2  →    ^8.6.1

Se alguém já tiver esse problema com um servidor expresso personalizado, isso pode ocorrer durante o uso de vários analisadores de corpo, porque as rotas de API do NextJs o habilitam por padrão. Use apenas o analisador de corpo expresso ou apenas o analisador de corpo NextJs. Como desativar o analisador de corpo NextJs documentado lá: https://nextjs.org/docs#api -middlewares

@epranka @thgh ,

Estou usando o servidor Firebase Cloud Functions e não consigo fazer nenhuma solicitação POST para minha rota de API. As solicitações POST parariam, mas as solicitações GET funcionariam bem. E se eu estivesse usando o servidor de desenvolvimento NextJS local, as solicitações POST também funcionariam bem.

A desativação do analisador de corpo ao usar o Firebase Cloud Functions corrigiu o problema.

Aparentemente, o Firebase Cloud Functions vem com seu próprio analisador de corpo e entra em conflito com o NextJS. Portanto, você deve desativar o analisador de corpo para Firebase Cloud Functions, mas ativá-lo para desenvolvimento local usando o servidor de desenvolvimento NextJS.

Então, basicamente, solte isso em seu pages/api/[yourEndPoint].js :

export const config = {
  api: {
    bodyParser: process.env.NODE_ENV !== 'production'
  }
};

A resposta

  server.get("*", (req, res) => handle(req, res));
  server.post("*", (req, res) => handle(req, res));

Muito Obrigado!

@epranka @thgh ,

Estou usando o servidor Firebase Cloud Functions e não consigo fazer nenhuma solicitação POST para minha rota de API. As solicitações POST parariam, mas as solicitações GET funcionariam bem. E se eu estivesse usando o servidor de desenvolvimento NextJS local, as solicitações POST também funcionariam bem.

A desativação do analisador de corpo ao usar o Firebase Cloud Functions corrigiu o problema.

Aparentemente, o Firebase Cloud Functions vem com seu próprio analisador de corpo e entra em conflito com o NextJS. Portanto, você deve desativar o analisador de corpo para Firebase Cloud Functions, mas ativá-lo para desenvolvimento local usando o servidor de desenvolvimento NextJS.

Então, basicamente, solte isso em seu pages/api/[yourEndPoint].js :

export const config = {
  api: {
    bodyParser: process.env.NODE_ENV !== 'production'
  }
};

Obrigado! Estava enfrentando exatamente o mesmo problema. Resolvido com sua correção. É surpreendente que as funções do Firebase não forneçam nenhuma configuração para desativar a análise automática do corpo.

então temos que usar um servidor personalizado, entendemos, mas obter o corpo analisado dentro da rota da API teria resolvido muitos problemas.

Esta página foi útil?
0 / 5 - 0 avaliações