Next.js: Rute API Next.js 9 berfungsi pada Dapatkan Permintaan tetapi tidak Posting permintaan

Dibuat pada 14 Jul 2019  ·  23Komentar  ·  Sumber: vercel/next.js

Pertanyaan tentang Next.js

Saya mencoba memodifikasi beberapa api untuk menggunakan post alih-alih get.
Saya memiliki kode permintaan seperti ini dengan pengambilan normal

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

Itu akan sampai ke file di dalam ./page/api dan menyelesaikan, namun, jika saya mengubah kode menjadi berikut

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

Ini akan memberi saya 404 tidak ditemukan. Saya ingin tahu apa masalahnya di sini?

Terima kasih

Komentar yang paling membantu

Saya juga melihat 404 di proyek kami dengan yang berikut:

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

Tidak masalah apa konten dalam file api/bookings . Itu tidak akan pernah dipukul. Saya menggunakan now dev untuk menjalankan proyek di localhost

Memperbarui
Saya menemukan bahwa itu berfungsi dengan baik dengan now dev tetapi tidak berfungsi dengan file server.js saya karena saya tidak menangani permintaan posting. Jika Anda cukup menambahkan handler untuk permintaan posting, semuanya akan berfungsi dengan baik:

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

Semua 23 komentar

Hai @zluo01 , berikan reproduksi penuh, dari masalah Anda, sulit untuk menebak apa yang salah. Anda dapat memeriksa tes integrasi untuk POST .

Apakah Anda dapat mengetahui hal ini? Dokumentasi untuk rute API cukup minim, dan saya juga menerima respons 404 untuk permintaan POST yang dikirim ke rute yang berfungsi dengan baik untuk permintaan GET

Apakah Anda dapat mengetahui hal ini? Dokumentasi untuk rute API cukup minim, dan saya juga menerima respons 404 untuk permintaan POST yang dikirim ke rute yang berfungsi dengan baik untuk permintaan GET

Maaf tidak, saya menggunakan Get dan meletakkan barang-barang di dalam header sebagai gantinya dan saya tidak punya waktu untuk menghasilkan reproduksi penuh.

Beberapa dokumentasi tentang penanganan POST akan berguna

@stoplion apa yang ingin Anda dokumentasikan? Bisakah Anda membuat masalah dengan mengikuti template masalah untuk itu?

Tentu

Saya juga melihat 404 di proyek kami dengan yang berikut:

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

Tidak masalah apa konten dalam file api/bookings . Itu tidak akan pernah dipukul. Saya menggunakan now dev untuk menjalankan proyek di localhost

Memperbarui
Saya menemukan bahwa itu berfungsi dengan baik dengan now dev tetapi tidak berfungsi dengan file server.js saya karena saya tidak menangani permintaan posting. Jika Anda cukup menambahkan handler untuk permintaan posting, semuanya akan berfungsi dengan baik:

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

@TommySorensen ini harus diperbaiki di canary terbaru

Apakah ini pernah dijawab? Apakah ada cara untuk POST ke Rute API v9 Berikutnya?

Apakah ini pernah dijawab? Apakah ada cara untuk POST ke Rute API v9 Berikutnya?

Ya. Hanya memposting ke rute api akan berfungsi dengan baik. Gunakan contoh ini dan ubah get to post. Itulah yang saya lakukan. Bekerja seperti pesona

@huv1k ada ide tentang rilis?

@lifeiscontent rilis apa?

@huv1k kapan rilis next.js berikutnya akan keluar dengan perbaikan ini

@lifeiscontent Tidak ada bug untuk diperbaiki. Saya mengujinya sendiri. POST berfungsi dengan baik jika Anda menggunakan contoh NextJS. Ini benar sesuatu dalam aplikasi Anda. Tolong berikan contoh kode lengkapnya, agar kami dapat membantu penyelidikannya 👍

mudah sakit
di _server khusus_ Anda
melakukan

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

Repro:

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

Tambahkan file api/test.js

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

Tambahkan penangan permintaan di server.js:

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

Jalankan yarn dev (atau node server.js )

Kirim POST ke http://localhost :3000/api/test

Diharapkan: log konsol api test POST
Aktual: tidak ada log, permintaan tetap tertunda hingga waktu habis

Anda perlu memperbarui contoh:

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

perlu:

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

Menemukan kesalahan kami: memutakhirkan isomorphic-unfetch => JANGAN UPGRADE

Omong-omong, ketergantungan Firebase sudah cukup lama:

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

Jika ada yang memiliki masalah ini dengan server ekspres khusus, itu dapat terjadi saat menggunakan beberapa parser tubuh, karena rute api NextJs mengaktifkannya secara default. Gunakan hanya pengurai badan ekspres, atau hanya pengurai badan NextJs. Cara menonaktifkan parser tubuh NextJs yang didokumentasikan di sana: https://nextjs.org/docs#api -middlewares

@epranka @thgh , Man, butuh waktu berjam-jam untuk mencari tahu yang ini.

Saya menggunakan server Firebase Cloud Functions, dan saya tidak dapat membuat permintaan POST apa pun ke rute API saya. Permintaan POST akan hang, tetapi permintaan GET akan berfungsi dengan baik. Dan jika saya menggunakan server dev NextJS lokal, permintaan POST juga akan berfungsi dengan baik.

Menonaktifkan parser tubuh saat menggunakan Firebase Cloud Functions memperbaikinya.

Rupanya Firebase Cloud Functions hadir dengan parser tubuhnya sendiri, dan itu bertentangan dengan yang NextJS. Jadi, Anda harus menonaktifkan body parser untuk Firebase Cloud Functions, tetapi mengaktifkannya untuk pengembangan lokal menggunakan server dev NextJS.

Jadi pada dasarnya letakkan ini di pages/api/[yourEndPoint].js :

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

@TommySorensen menjawab menyelesaikannya untuk saya:

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

Terimakasih banyak!

@epranka @thgh , Man, butuh waktu berjam-jam untuk mencari tahu yang ini.

Saya menggunakan server Firebase Cloud Functions, dan saya tidak dapat membuat permintaan POST apa pun ke rute API saya. Permintaan POST akan hang, tetapi permintaan GET akan berfungsi dengan baik. Dan jika saya menggunakan server dev NextJS lokal, permintaan POST juga akan berfungsi dengan baik.

Menonaktifkan parser tubuh saat menggunakan Firebase Cloud Functions memperbaikinya.

Rupanya Firebase Cloud Functions hadir dengan parser tubuhnya sendiri, dan itu bertentangan dengan yang NextJS. Jadi, Anda harus menonaktifkan body parser untuk Firebase Cloud Functions, tetapi mengaktifkannya untuk pengembangan lokal menggunakan server dev NextJS.

Jadi pada dasarnya letakkan ini di pages/api/[yourEndPoint].js :

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

Terima kasih! Sedang menghadapi masalah yang sama persis. Diselesaikan dengan perbaikan Anda. Mengejutkan bahwa fungsi Firebase tidak memberikan konfigurasi apa pun untuk mematikan penguraian isi otomatis.

jadi kita harus menggunakan server khusus, mengerti tetapi mendapatkan tubuh yang diuraikan di dalam rute api akan memecahkan banyak masalah.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat