Next.js: Next.js 9 APIルートは、リクエストの取得では機能しますが、リクエストの投稿では機能しません

作成日 2019年07月14日  ·  23コメント  ·  ソース: vercel/next.js

Next.jsに関する質問

getの代わりにpostを使用するようにAPIの一部を変更しようとしています。
通常のフェッチでこのようなリクエストコードがあります

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

./page/api内のファイルにアクセスして解決しますが、コードを次のように変更すると解決します

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

404が見つかりませんでした。 ここで何が問題なのかしら?

ありがとうございました

最も参考になるコメント

私たちのプロジェクトには、次の404も表示されます。

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

api/bookingsファイルの内容は重要ではありません。 ヒットすることはありません。 ローカルホストでプロジェクトを実行するためにnow devを使用しています

アップデート
now dev正常に機能することがわかりましたが、投稿リクエストを処理していなかったため、 server.jsファイルでは機能しませんでした。 ポストリクエストのハンドラーを追加するだけで、すべてが正常に機能します。

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

全てのコメント23件

ねえ@ zluo01 、完全な複製を提供してください、あなたの問題から何が間違っているのか推測するのは難しいです。 POST統合テストを確認できます。

あなたはこれを理解することができましたか? APIルートのドキュメントはごくわずかであり、GETリクエストで正常に機能したルートに送信されたPOSTリクエストに対して404応答も受信しています。

あなたはこれを理解することができましたか? APIルートのドキュメントはごくわずかであり、GETリクエストで正常に機能したルートに送信されたPOSTリクエストに対して404応答も受信しています。

申し訳ありませんが、代わりにGetを使用してヘッダー内にコンテンツを配置しているため、完全な複製を作成する時間がありません。

POSTの処理に関するいくつかのドキュメントが役立ちます

@stoplion何を文書化したいですか? 課題テンプレートに従って課題を作成できますか?

もちろん

私たちのプロジェクトには、次の404も表示されます。

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

api/bookingsファイルの内容は重要ではありません。 ヒットすることはありません。 ローカルホストでプロジェクトを実行するためにnow devを使用しています

アップデート
now dev正常に機能することがわかりましたが、投稿リクエストを処理していなかったため、 server.jsファイルでは機能しませんでした。 ポストリクエストのハンドラーを追加するだけで、すべてが正常に機能します。

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

@TommySorensenこれは最新のカナリアで修正する必要があります

これは今までに答えられましたか? 次のv9APIルートにPOSTする方法はありますか?

これは今までに答えられましたか? 次のv9APIルートにPOSTする方法はありますか?

はい。 APIルートに投稿するだけで問題なく動作します。 この例を使用し

@ huv1kリリースに関するアイデアはありますか?

何の@lifeiscontentリリース?

@ huv1kは、

@lifeiscontent修正するバグはありません。 私はそれを自分でテストしました。 NextJSの例を使用すれば、POSTは問題なく機能します。 それはあなたのアプリケーションで適切に何かです。 調査を支援できるように、完全なコードの例を提供してください👍

簡単なディージー
_カスタムサーバー_で
NS

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

再現:

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

ファイルapi / test.jsを追加します

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

server.jsにリクエストハンドラーを追加します。

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

yarn dev (またはnode server.js )を実行します

POSTをhttp:// localhost :3000 / api / testに送信し

予想:コンソールログapi test POST
実際:ログはありません。リクエストはタイムアウトするまで保留されます

例を更新する必要があります。

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

する必要があります:

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

私たちの間違いを見つけました: isomorphic-unfetchアップグレードする=>アップグレードしないでください🤕

ちなみに、Firebaseの依存関係はかなり古いものです。

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

カスタムエクスプレスサーバーでこの問題がまだ発生している場合は、NextJs apiルートでデフォルトで有効になっているため、複数のボディパーサーを使用しているときに発生する可能性があります。 Expressボディパーサーのみ、またはNextJsボディパーサーのみを使用してください。 そこに記載されているNextJsボディパーサーを無効にする方法: https ://nextjs.org/docs#api -middlewares

@epranka @thgh 、男、これを理解するのに何時間もかかりました。

Firebase Cloud Functionsサーバーを使用していますが、APIルートにPOSTリクエストを送信できませんでした。 POSTリクエストはハングしますが、GETリクエストは正常に機能します。 また、ローカルのNextJS開発サーバーを使用している場合は、POSTリクエストも正常に機能します。

Firebase CloudFunctionsの使用時にボディパーサーを無効にすると修正されました。

どうやらFirebaseCloud Functionsには独自のボディパーサーが付属しており、NextJSのものと競合します。 そのため、Firebase Cloud Functionsのボディパーサーを無効にする必要がありますが、NextJS開発サーバーを使用したローカル開発では有効にします。

したがって、基本的にこれをpages/api/[yourEndPoint].jsにドロップします。

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

@TommySorensenの答えは私のためにそれを解決しました:

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

どうもありがとう!

@epranka @thgh 、男、これを理解するのに何時間もかかりました。

Firebase Cloud Functionsサーバーを使用していますが、APIルートにPOSTリクエストを送信できませんでした。 POSTリクエストはハングしますが、GETリクエストは正常に機能します。 また、ローカルのNextJS開発サーバーを使用している場合は、POSTリクエストも正常に機能します。

Firebase CloudFunctionsの使用時にボディパーサーを無効にすると修正されました。

どうやらFirebaseCloud Functionsには独自のボディパーサーが付属しており、NextJSのものと競合します。 そのため、Firebase Cloud Functionsのボディパーサーを無効にする必要がありますが、NextJS開発サーバーを使用したローカル開発では有効にします。

したがって、基本的にこれをpages/api/[yourEndPoint].jsにドロップします。

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

ありがとう! まったく同じ問題に直面していました。 修正で解決しました。 Firebase関数が、自動ボディ解析をオフにする設定を提供しないのは驚くべきことです。

したがって、カスタムサーバーを使用する必要がありますが、APIルート内で解析された本体を取得すると、多くの問題が解決されます。

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

havefive picture havefive  ·  3コメント

sospedra picture sospedra  ·  3コメント

ghost picture ghost  ·  3コメント

renatorib picture renatorib  ·  3コメント

knipferrc picture knipferrc  ·  3コメント