Next.js: Next.js 9 API 路由适用于获取请求但不适用于发布请求

创建于 2019-07-14  ·  23评论  ·  资料来源: vercel/next.js

关于 Next.js 的问题

我尝试修改一些 api 以使用 post 而不是 get。
我有这样的请求代码,正常获取

 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 not found。 我想知道这里有什么问题?

谢谢

最有用的评论

我还在我们的项目中看到了 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文件。 如果您只是为 post 请求添加一个处理程序,一切都会正常工作:

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

所有23条评论

@zluo01 ,提供完整的复制,从你的问题很难猜测可能是什么问题。 您可以检查POST集成测试

你能弄清楚吗? API 路由的文档非常少,而且我还收到了 POST 请求的 404 响应,该响应发送到对 GET 请求工作正常的路由

你能弄清楚吗? API 路由的文档非常少,而且我还收到了 POST 请求的 404 响应,该响应发送到对 GET 请求工作正常的路由

抱歉,不,我使用 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文件。 如果您只是为 post 请求添加一个处理程序,一切都会正常工作:

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

@TommySorensen这应该在最新的金丝雀中修复

有没有回答过这个问题? 有没有办法发布到 Next v9 API 路由?

有没有回答过这个问题? 有没有办法发布到 Next v9 API 路由?

是的。 只需发布到 api 路由就可以了。 使用此示例并更改获取发布。 这就是我所做的。 像魅力一样工作😉

@huv1k关于发布的任何想法?

@lifeiscontent发布什么?

@huv1k关于

@lifeiscontent没有要修复的错误。 我自己测试过。 如果您使用 NextJS 示例,POST 工作得很好。 它在您的应用程序中是正确的。 请提供完整代码的示例,以便我们帮助调查👍

容易烦躁
在您的_自定义服务器_

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

如果有人在使用自定义 express 服务器时遇到此问题,则在使用多个正文解析器时可能会发生此问题,因为 NextJs api 路由默认启用它。 仅使用 express 正文解析器,或仅使用 NextJs 正文解析器。 如何禁用那里记录的 NextJs 正文解析器: https: //nextjs.org/docs#api -middlewares

@epranka @thgh ,伙计,我花了几个小时才弄明白。

我正在使用 Firebase Cloud Functions 服务器,但无法向我的 API 路由发出任何 POST 请求。 POST 请求会挂起,但 GET 请求会正常工作。 如果我使用的是本地 NextJS 开发服务器,POST 请求也可以正常工作。

使用 Firebase Cloud Functions 时禁用正文解析器修复了它。

显然 Firebase Cloud 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 Cloud Functions 时禁用正文解析器修复了它。

显然 Firebase Cloud 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 等级

相关问题

rauchg picture rauchg  ·  208评论

robinvdvleuten picture robinvdvleuten  ·  74评论

acanimal picture acanimal  ·  74评论

timneutkens picture timneutkens  ·  72评论

dunika picture dunika  ·  58评论