Nextjs没有处理发布请求

我需要在我的NextJS应用程序中处理POST请求。此发布请求来自其他域。

我添加了这个 receptor.ts 文件到我的 /pages/api 目录:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    console.log('POST')
    const message = req.body.message;
    console.log(`Message: ${message}`);
    res.status(200).json({ message: "Ok" });
  } else {
    res.status(405).json({ error: "Not allowed" });
  }

  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
}

在另一个应用程序中,我是这样称呼它的:

const url = `http://localhost:3000/api/receptor`;
            const data = { message: "Hello" };

            fetch(url, {
              method: "POST",
              headers: {"Content-Type": "application/json"},
              body: JSON.stringify(data)
            })
              .then(response => response.json())
              .then(data => console.log(data))
              .catch(error => console.error(error));

浏览器控制台显示:

在“”获取的访问权限http://localhost:3000/api/receptor'来自原点'http://localhost:3001'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在“access control Allow Origin”标头。如果不透明响应满足您的需求,请将请求的模式设置为“无cors”,以在禁用cors的情况下获取资源。

IDE的控制台显示:

error-错误[ERR_HTTP_HEADERS_SENT]:将标头发送到客户端后无法设置标头

如果我加上 mode: "no-cors" 对请求,然后我得到了相同的错误。

有关于如何解决这个问题的提示吗?

解决方案

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') {
    res.status(200).end();
    return;
  }

  if (req.method === 'POST') {
    console.log('POST')
    const message = req.body.message;
    console.log(`Message: ${message}`);
    res.status(200).json({ message: "Ok" });
  } else {
    res.status(405).json({ error: "Not allowed" });
  }
}

问题是我没有处理预先提出的要求。这是解决方案,我将投票支持结束。