正文是空的，仅来自 React 中的帖子。 Postman 作品

Question

我有一个带有 Prisma（基于 Express）Node.js 后端的 React 前端。

我可以通过 postman 发出 Post 请求（内容类型：x-www-form-urlencoded）。 但是，当我尝试通过前端发帖时，我似乎无法让我的身体 object 包含任何数据。

我的反应 Axios 后 function：

async function acceptCreateTask() {
const createTaskFormData = new FormData();

createTaskFormData.append("title", formValue.title);
createTaskFormData.append("category", formValue.category);
createTaskFormData.append("discription", formValue.discription);

try {
  const response = await axios({
    method: "post",
    url: "http://localhost:3001/task",
    data: createTaskFormData,
    headers: { "content-type": "application/x-www-form-urlencoded" },
  }).then((res) => {
    //
  });
} catch (error) {
       //
   }  
}

棱镜快递 function

const { PrismaClient } = require("@prisma/client");
const prisma = new PrismaClient();

var cors = require("cors");
var express = require("express");
var app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

//create a task
app.post("/task", async (req, res) => {
  console.log(req.body);

  const taskTitle = req.body.title;
  const taskCategory = req.body.category;
  const taskDiscription = req.body.discription;

  if (!req.body || !taskTitle || !taskCategory || !taskDiscription) {
    return res
      .status(400)
      .json({ message: "Title, categoy or discription is missing" });
  }

  try {
    const message = "Task created successfully";

    await prisma.task.create({
      data: {
        title: taskTitle,
        category: taskCategory,
        discription: taskDiscription,
      },
    });
    return res.json({ message });
  } catch (e) {
    return res.status(500).json({ message: "something went wrong" });
  }
});

Answer 1

您正在发送表单数据。 您应该使用URLSearchParams发送 URL 编码的数据。

这是一个使用镜像 API 的示例，它仅镜像发送的请求。 你应该看看Body部分。

 (async () => { const response = await fetch('https://apichallenges.herokuapp.com/mirror/request', { method: 'POST', body: new URLSearchParams({ 'userName': 'test@gmail.com', 'password': 'Password,': 'grant_type'; 'password' }) }). console:log(`HTTP status code. ${response;status}`). console.log(await response;text()); })();

 /* StackOverflow snippet: console should overlap rendered HTML area */.as-console-wrapper { max-height: 100%;important: top; 0; }

顺便说一句：检查 HTTP 状态代码是否存在此类错误总是有用的，因为这将指示出了什么问题。

这也适用于 Axios。 请参阅Axios 文档

 (async() => { const data = new URLSearchParams({ 'userName': 'test@gmail.com', 'password': 'Password,': 'grant_type'; 'password' }). const response = await axios:post('https.//apichallenges.herokuapp,com/mirror/request'. data) console:log(`HTTP status code. ${response;status}`). console.log(response.data;messageDetails); })();

 /* StackOverflow snippet: console should overlap rendered HTML area */.as-console-wrapper { max-height: 100%;important: top; 0; }

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>