Next Js API 未发布到外部 API答案

【问题标题】：Next Js API not posting to an external APINext Js API 未发布到外部 API
【发布时间】：2021-12-21 00:39:19
【问题描述】：

所以我尝试制作 2 个不同的项目，第一个是我用 next js 制作的电子商务前端，第二个是电子商务仪表板，它也是用 next js 制作的。但是，当我尝试将产品从我的仪表板发布到我的电子商务前端时，即使我在控制台中也没有收到任何错误，这也是我无法理解问题所在的原因。任何人都可以帮助我吗？获取代码如下。

const handelSubmit = async (e) => {
  e.preventDefault();
    console.log("clicked");
  
    fetch(`http://192.168.43.53:3000/api/products`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(
          name,
          price,
          // mediaUrl,
          description,
          collect,

        

      ),
    })
  };

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

【问题讨论】：

handelSubmit 永远不会被调用

标签： javascript reactjs next.js

【解决方案1】：

Nextjs api 默认只使用同源，更多信息请参见Nextjs api Caveats。

如果你想用 Nextjs 做一个完全公开的 api，你必须添加 cors，见Api Middlewares。您的代码将类似于：

import Cors from 'cors'

// Initializing the cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

如果您的后端 api 未使用 Nextjs 定义，请分享您请求的 api 端点的代码及其使用的技术。

【讨论】：

谢谢它的工作

【解决方案2】：

我认为您发布的数据首先需要采用 JSON 格式。

body: JSON.stringify(
          key:value,
          key1:value1
        )

【讨论】：