标题：解决嵌套 Fetch 请求中第二步 API 接收不到请求体的问题

在使用 `fetch` 实现“先上传图片、再创建用户档案”的链式调用时，第二步 post 请求因缺少 `content-type: application/json` 请求头，导致后端无法解析 `req.body`，始终返回 `undefined`。

你遇到的问题非常典型：第一个 fetch（上传图片）使用 FormData，浏览器自动设置 Content-Type: multipart/form-data；但第二个 fetch（创建档案）若未显式声明 Content-Type，浏览器默认不设该头，而 Express 等框架依赖此头部决定是否解析请求体——结果 req.body 为空对象 {}，req.body.name 和 req.body.imageid 自然为 undefined。

✅ 正确做法：为 JSON 请求显式添加请求头

将你的 JS 中第二段 fetch 修改为：

const resProfile = await fetch('http://localhost:4000/api/createProfile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // ← 关键！必须添加
  },
  body: JSON.stringify({
    name: name.value,
    imageid: resData.imageid
  })
});

⚠️ 注意：

• headers 必须是对象，且 'Content-Type': 'application/json' 缺一不可；
• body 必须是字符串（JSON.stringify() 后的结果），不能传入原始对象；
• 不要混用 FormData 和 JSON.stringify —— 前者用于文件上传（含二进制），后者仅用于纯 JSON 数据。

? 后端需确保正确解析 JSON

确认你的 Express 应用已全局启用 express.json() 中间件（通常放在路由定义之前）：

拍我AI

AI视频生成平台PixVerse的国内版本

下载

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

// ✅ 必须启用，且顺序靠前
app.use(express.json());           // 解析 application/json
app.use(express.urlencoded({ extended: true })); // 解析 x-www-form-urlencoded（如表单提交）

// ✅ 若使用 multer 处理文件上传，也需单独配置（与 json 中间件不冲突）
const multer = require('multer');
const upload = multer({ dest: './uploads/' });
app.post('/api/uploadimage', upload.single('image'), yourUploadHandler);

app.post('/api/createProfile', yourCreateProfileHandler);

? 提示：express.json() 不会影响 multipart/form-data 请求，因此上传接口仍需 multer；但 createProfile 是纯 JSON 请求，必须依赖 express.json() 才能填充 req.body。

? 验证技巧：快速排查请求体是否送达

在 createProfile 路由中加入调试日志：

exports.createProfile = async (req, res) => {
  console.log('Raw headers:', req.headers['content-type']); // 查看是否收到 application/json
  console.log('Full body:', req.body);                       // 应输出 { name: "...", imageid: 123 }
  console.log('Name from body:', req.body?.name);           // 若为 undefined，说明解析失败

  if (!req.body?.name || !req.body?.imageid) {
    return res.status(400).json({ error: 'Missing name or imageid' });
  }

  // ✅ 此时可安全使用 req.body.name 和 req.body.imageid
  res.status(201).json({ profileid: 'abc123', success: true });
};

✅ 完整修正版前端代码（含错误处理与语义优化）

<form id="createProfile" enctype="multipart/form-data">
  <p>Profile name:</p>
  <input type="text" name="name" required>
  <p>Image:</p>
  <input type="file" name="image" accept="image/*" required>
  <button type="submit">Create Profile</button>
</form>

<script>
  document.getElementById('createProfile').addEventListener('submit', async e => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);

    try {
      // Step 1: Upload image
      const uploadRes = await fetch('http://localhost:4000/api/uploadimage', {
        method: 'POST',
        body: formData // 自动设置 multipart/form-data
      });

      const uploadData = await uploadRes.json();
      if (uploadData.code !== 200) throw new Error(uploadData.success || 'Image upload failed');

      // Step 2: Create profile with JSON
      const profileRes = await fetch('http://localhost:4000/api/createProfile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name.value,
          imageid: uploadData.imageid
        })
      });

      const profileData = await profileRes.json();
      console.log(`${profileData.profileid} has been created`);
      alert('Profile created successfully!');
    } catch (err) {
      console.error('Error:', err.message);
      alert('Failed to create profile: ' + err.message);
    }
  });
</script>

? 总结

遵循以上规范，嵌套请求即可稳定传递数据，无需改用 Axios 或回调地狱——现代 async/await + 正确请求头，就是最简洁可靠的解法。