Next.js: La ruta de la API de Next.js 9 funciona en Obtener solicitud pero no en Publicar solicitud

Creado en 14 jul. 2019  ·  23Comentarios  ·  Fuente: vercel/next.js

Pregunta sobre Next.js

Intento modificar algunas de las api para usar post en lugar de get.
Tengo un código de solicitud como este con recuperación normal

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

Llegará al archivo dentro ./page/api y se resolverá, sin embargo, si cambio a código para seguir

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

Me dará 404 not found. Me pregunto cuál es el problema aquí.

Gracias

Comentario más útil

También veo el 404 en nuestro proyecto con lo siguiente:

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

No importa cuál sea el contenido del archivo api/bookings . Nunca será golpeado. Estoy usando now dev para ejecutar el proyecto en localhost

Actualizar
Descubrí que funcionaba bien con now dev pero no funcionaba con mi archivo server.js debido a que no había manejado las solicitudes de publicación. Si simplemente agrega un controlador para la solicitud de publicación, todo funcionará bien:

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

Todos 23 comentarios

Hola @ zluo01 , proporciona una reproducción completa, a partir de tu problema es difícil adivinar qué podría estar mal. Puede verificar la prueba de integración por POST .

¿Pudiste resolver esto? La documentación para las rutas API es bastante mínima, y ​​también recibo una respuesta 404 para las solicitudes POST enviadas a una ruta que funcionó bien para las solicitudes GET

¿Pudiste resolver esto? La documentación para las rutas API es bastante mínima, y ​​también recibo una respuesta 404 para las solicitudes POST enviadas a una ruta que funcionó bien para las solicitudes GET

Lo siento, no, utilizo Obtener y pongo cosas dentro de los encabezados y no tengo tiempo para producir una reproducción completa.

Alguna documentación sobre el manejo de POST sería útil

@stoplion, ¿qué te gustaría haber documentado? ¿Puede crear un problema siguiendo la plantilla de problemas?

Seguro

También veo el 404 en nuestro proyecto con lo siguiente:

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

No importa cuál sea el contenido del archivo api/bookings . Nunca será golpeado. Estoy usando now dev para ejecutar el proyecto en localhost

Actualizar
Descubrí que funcionaba bien con now dev pero no funcionaba con mi archivo server.js debido a que no había manejado las solicitudes de publicación. Si simplemente agrega un controlador para la solicitud de publicación, todo funcionará bien:

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

@TommySorensen esto debería arreglarse en el último canario

¿Fue esto alguna vez respondido? ¿Hay alguna forma de POST en una ruta de API Next v9?

¿Fue esto alguna vez respondido? ¿Hay alguna forma de POST en una ruta de API Next v9?

Si. Solo publicar en las rutas de la API funcionará bien. Utilice este ejemplo y cambie el get to post. Eso fue lo que hice. Funcionó como un encanto 😉

@ huv1k ¿ alguna idea sobre un lanzamiento?

@lifeiscontent ¿ liberación de qué?

@ huv1k sobre cuándo

@lifeiscontent No hay ningún error que corregir. Lo probé yo mismo. POST funciona bien si usa los ejemplos de NextJS. Es algo propiamente dicho en su aplicación. Proporcione un ejemplo del código completo para que podamos ayudar con la investigación 👍

facil deasy
en tu _servidor personalizado_
hacer

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

Repro:

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

Agregar archivo api / test.js

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

Agregue el controlador de solicitudes en server.js:

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

Ejecute yarn dev (o node server.js )

Envíe POST a http: // localhost : 3000 / api / test

Esperado: registros de consola api test POST
Real: sin registros, la solicitud permanece pendiente hasta el tiempo de espera

Necesita actualizar el ejemplo:

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

necesita ser:

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

Encontré nuestro error: actualizar isomorphic-unfetch => NO ACTUALIZAR 🤕

Por cierto, la dependencia de Firebase es bastante antigua:

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

Si alguien tiene este problema todavía con un servidor expreso personalizado, puede ocurrir al usar varios analizadores corporales, porque las rutas de la API de NextJs lo habilitan de forma predeterminada. Use solo el analizador de cuerpo expreso, o solo el analizador de cuerpo de NextJs. Cómo deshabilitar el analizador de cuerpo de NextJs documentado allí: https://nextjs.org/docs#api -middlewares

@epranka @thgh , Hombre, me tomó horas resolver esto.

Estoy usando el servidor de Firebase Cloud Functions y no pude realizar ninguna solicitud POST a mi ruta de API. Las solicitudes POST se bloquearían, pero las solicitudes GET funcionarían bien. Y si estuviera usando el servidor de desarrollo NextJS local, las solicitudes POST también funcionarían bien.

La inhabilitación del analizador corporal al usar Firebase Cloud Functions lo solucionó.

Aparentemente, Firebase Cloud Functions viene con su propio analizador de cuerpo y entra en conflicto con el de NextJS. Por lo tanto, debe deshabilitar el analizador corporal para Firebase Cloud Functions, pero habilitarlo para el desarrollo local con el servidor de desarrollo NextJS.

Así que básicamente suelta esto en tu pages/api/[yourEndPoint].js :

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

La respuesta de

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

¡Muchas gracias!

@epranka @thgh , Hombre, me tomó horas resolver esto.

Estoy usando el servidor de Firebase Cloud Functions y no pude realizar ninguna solicitud POST a mi ruta de API. Las solicitudes POST se bloquearían, pero las solicitudes GET funcionarían bien. Y si estuviera usando el servidor de desarrollo NextJS local, las solicitudes POST también funcionarían bien.

La inhabilitación del analizador corporal al usar Firebase Cloud Functions lo solucionó.

Aparentemente, Firebase Cloud Functions viene con su propio analizador de cuerpo y entra en conflicto con el de NextJS. Por lo tanto, debe deshabilitar el analizador corporal para Firebase Cloud Functions, pero habilitarlo para el desarrollo local con el servidor de desarrollo NextJS.

Así que básicamente suelta esto en tu pages/api/[yourEndPoint].js :

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

¡Gracias! Estaba enfrentando exactamente el mismo problema. Resuelto con tu solución. Es sorprendente que las funciones de Firebase no ofrezcan ninguna configuración para desactivar el análisis automático del cuerpo.

así que tenemos que usar un servidor personalizado, lo tengo, pero obtener el cuerpo analizado dentro de la ruta api habría resuelto muchos problemas.

¿Fue útil esta página
0 / 5 - 0 calificaciones