如何将用户输入数据发送至Next.js API路由？数据未接收问题排查

问题根源 #

你直接将URL字符串作为请求体发送，但未设置正确的Content-Type请求头，导致Next.js API路由无法解析该格式的请求体，最终req.body为空。另外，直接在浏览器访问localhost/api/data/url属于GET请求，这类请求本身没有请求体，自然拿不到数据。

修复方案 #

1. 调整客户端fetch请求 #

添加请求头并将数据包装为JSON格式发送：

// 处理URL输入的组件 
//InputURL.js

import { useState } from "react";

export default function InputURL() {
  const [url, setUrl] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await fetch(`/api/data/url`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json", // 必须设置该头部以解析JSON
        },
        body: JSON.stringify({ url }), // 将URL包装为JSON对象
      });
      const result = await response.json();
      console.log("API返回结果", result);
    } catch (error) {
      console.error("请求出错", error);
    }

    console.log("URL已发送至API", url);
  };

  return (
      <form onSubmit={handleSubmit}>
          <input
            onChange={(e) => setUrl(e.target.value)}
            type="url"
            value={url} // 绑定value消除受控组件警告
          />
          <button type="submit">Submit</button>
      </form>
  );
}

2. 更新API路由逻辑 #

添加请求方法校验，并从req.body中正确提取参数：

// pages/api/data/url.js
export default async function handler(req, res) {
  // 限制仅接受POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }

  const { url } = req.body;
  if (!url) {
    return res.status(400).json({ message: '请提供有效URL' });
  }

  try {
    const data = await getData(url);
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ message: '数据抓取失败', error: error.message });
  }
}

重要提醒 #

• 浏览器直接访问API路由是GET请求，不会携带POST请求体，测试时请通过组件提交表单，或用Postman等工具发送POST请求。
• 必须设置Content-Type: application/json，否则Next.js无法自动解析JSON格式的请求体。

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