Next.js客户端发送POST请求报错TypeError: Failed to Fetch的解决方案咨询

我来帮你排查并解决这个问题，你的代码里有几个关键问题导致了请求失败，咱们一步步来修正：

1. 核心问题：函数定义的位置错误 #

getStaticProps是Next.js的服务端/构建时运行的函数，你在里面定义的postData和getresponse根本无法被客户端的组件访问到。当你点击按钮调用getresponse时，客户端环境里根本找不到这个函数，这是导致报错的主要原因之一。

你需要把请求相关的函数移到客户端组件内部（或者单独抽成一个客户端可用的工具函数）。

2. 完善Fetch请求配置 #

你的fetch请求缺少必要的请求头，后端可能无法正确解析JSON格式的请求体；另外也没有处理请求失败的情况（比如HTTP状态码非200的情况）。

3. 修正请求参数格式 #

按钮点击时传的{'data'}是无效的对象语法，应该写成{ data: '你的数据内容' }这样的键值对格式。

4. 处理跨域（CORS）问题 #

如果你的Next.js运行在默认的3000端口，后端在55331端口，属于跨域请求，需要确保你的Node.js后端配置了CORS允许3000端口的请求。

修正后的完整代码示例 #

客户端组件代码

const Page = () => {
  // 把请求函数移到组件内部，确保在客户端环境执行
  async function postData(url = '', data = {}) {
    try {
      const response = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json', // 必须添加这个头，让后端知道是JSON数据
        },
        body: JSON.stringify(data),
      });

      // 处理HTTP错误状态（比如404、500）
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }

      const json = await response.json();
      return json;
    } catch (error) {
      console.error('请求出错:', error);
      throw error; // 把错误抛出去，方便上层处理
    }
  }

  async function getResponse(data) {
    try {
      const res = await postData('http://localhost:55331/', data);
      alert(JSON.stringify(res)); // 注意：后端返回的res里如果没有body字段，直接用res即可
    } catch (error) {
      alert('请求失败：' + error.message);
    }
  }

  return (
    <div>
      {/* 修正参数格式 */}
      <button onClick={() => getResponse({ data: '测试数据' })}>Send POST</button>
    </div>
  );
};

export default Page;

Node.js后端配置CORS（如果还没配置）

如果你用的是Express框架，安装cors中间件并配置：

npm install cors

然后在你的Node.js代码里添加：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许来自Next.js默认端口3000的请求
app.use(cors({ origin: 'http://localhost:3000' }));

// 解析JSON请求体
app.use(express.json());

// 你的POST接口
app.post('/', (req, res) => {
  console.log('收到的数据:', req.body);
  res.json({ message: '请求成功', receivedData: req.body });
});

app.listen(55331, () => {
  console.log('后端服务运行在http://localhost:55331');
});

额外注意事项 #

• 如果你的Next.js用的是App Router（Next.js 13+），确保组件是客户端组件（在文件顶部添加'use client'指令），因为交互逻辑需要在客户端执行。
• 测试时确保后端服务已经启动，并且端口号和代码里的一致。
• 避免在生产环境直接使用localhost地址，应该用环境变量配置后端API地址，比如process.env.NEXT_PUBLIC_API_URL。

内容的提问来源于stack exchange，提问作者JavierBurgoa