我有一個帶有 Prisma(基于 Express)Node.js 后端的 React 前端。
我可以通過郵遞員發出 Post 請求(內容型別:x-www-form-urlencoded)。但是,當我嘗試通過前端發帖時,我似乎無法讓我的 body 物件包含任何資料。
我的 React Axios 發布功能:
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) {
//
}
}
Prisma Express 功能
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" });
}
});
uj5u.com熱心網友回復:
您正在發送表單資料。您應該使用URLSearchParams來發送 URL 編碼的資料。
這是一個使用鏡像 API 的示例,它僅鏡像發送的請求。你應該看看Body部分。
(async () => {
const response = await fetch('https://apichallenges.herokuapp.com/mirror/request', {
method: 'POST',
body: new URLSearchParams({
'userName': '[email protected]',
'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': '[email protected]',
'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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/510358.html
下一篇:為什么我收到型別錯誤:res.send不是Axios的函式。Res.send在res.send之外作業,但我需要來自API的資料
