提问人：Adam Makie 提问时间：11/13/2023 最后编辑：Adam Makie 更新时间：11/13/2023 访问量：66
Axios 错误：使用 Axios 在 React 中发送 POST 请求时请求失败，状态代码为 400
Axios Error: Request failed with status code 400 when sending a POST request in React using Axios
问：
我正在构建一个 React 应用程序并尝试使用 Axios 向我的 Strapi 后端 API 发送 POST 请求。但是，我遇到以下错误：
{
"message": "Request failed with status code 400",
"name": "AxiosError",
"stack": "...",
"config": {
"transitional": { ... },
"adapter": [ ... ],
"transformRequest": [ ... ],
"transformResponse": [ ... ],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"env": { ... },
"headers": { ... },
"method": "post",
"url": "http://localhost:1337/api/products",
"data": { ... }
},
"code": "ERR_BAD_REQUEST",
"status": 400
}
这是我的 React 代码的相关部分：
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [image, setImage] = useState("");
const [price, setPrice] = useState("");
const [brand, setBrand] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
axios
.post(process.env.NEXT_PUBLIC_API_URL + "/products", {
"data": {
"name": name,
"description": description,
"image": image,
"price": price,
"brand": brand
},
})
.then((response) => {
console.log(response);
})
.catch((error) => {
setError(error);
console.log(error);
});
};
我已经检查了API URL，它似乎是正确的。请求有效负载也显示为有效的 JSON。但是，我仍然收到 400 错误请求错误。有人可以帮我了解可能导致此问题的原因以及如何解决它吗？
编辑：我做了更多的研究，当我尝试发布图像网址时，我似乎遇到了错误。我试着让图像为空，我得到了 200。
{
"data": null,
"error": {
"status": 400,
"name": "ValidationError",
"message": "1 relation(s) of type plugin::upload.file associated with this entity do not exist",
"details": {
"errors": [
{
"path": [],
"message": "1 relation(s) of type plugin::upload.file associated with this entity do not exist",
"name": "ValidationError"
}
]
}
}
}
答：
0赞
Adam Makie
11/13/2023
#1
终于想出了解决方案。对于以下任何感兴趣的人：
1. 将图片上传到 Strapi 后端： 首先，您需要将图片上传到 Strapi 后端。这是使用图像的 URL 完成的。从本质上讲，您是在告诉 Strapi 图像在互联网上的位置，以便它可以检索和存储它。
2. 将图像连接到产品：上传图像后，下一步是将其与 Strapi 数据库中的特定产品相关联。这意味着，当有人在您的应用程序或网站中查看产品时，他们也会看到您上传的图像。 您可以在创建产品时以相同的形式执行此关联。这就像在产品列表中添加图片，使其对用户更具吸引力和信息量。
3. 集成过程： 这里的关键点是图像上传和将其链接到产品都是通过相同的形式进行的。这种集成简化了流程，允许您一次性处理这两项任务 - 创建产品并将图像附加到其中。
代码如下：
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [imageURL, setImageURL] = useState("");
const [price, setPrice] = useState("");
const uploadImage = async (imageUrl) => {
try {
const imageResponse = await fetch(imageUrl);
const imageBlob = await imageResponse.blob();
const formData = new FormData();
formData.append('files', imageBlob, imageUrl);
const uploadResponse = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/upload`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
return uploadResponse.data[0].id;
} catch (error) {
setError(error);
console.error("Error uploading image:", error);
return null;
}
};
const handleSubmit = async (e) => {
e.preventDefault();
const uploadedImageId = await uploadImage(imageURL);
if (uploadedImageId)
{
axios.post(`${process.env.NEXT_PUBLIC_API_URL}/products`, {
data: {
name: name,
description: description,
image: uploadedImageId,
price: price,
},
})
.then(response => {
console.log('Product created:', response);
})
.catch(error => {
setError(error);
console.error('Error creating product:', error);
});
}
}; <label class="block mb-2 font-medium text-gray-900 dark:text-white">
Image (URL)
</label>
<input
type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Url"
name="image"
onChange={e => setImageURL(e.target.value)}
value={imageURL}
required
/>
</div>
评论