私は自分のバージョンのプロジェクトを作成することを除いて、Udemyのコードに従おうとしています。bcryptとjwtを使用した後、アプリに投稿できません。正常にログインできますが、何かを投稿しようとすると、422エラーが発生します。
これが私を立ち往生させているものです。
const twottSubmitHandler = async (event) => {
event.preventDefault();
try {
const formData = new FormData();
formData.append("title", formState.inputs.title.value);
formData.append("description", formState.inputs.description.value);
formData.append("creator", auth.userId);
await sendRequest("http://localhost:3001/api/twotts", "POST", formData, {
Authorization: "Bearer " + auth.token,
});
history.push("/");
} catch (err) {}
};
twotts-controllerでは、これがエラーをスローしているものです。
const errors = validationResult(req);
if (!errors.isEmpty()) {
return next(new HttpError("Invalid input passed", 422));
}
const { title, description, creator } = req.body;
const createdTwott = new Twott({
title,
description,
creator,
});
FormDataを使用する代わりにJSON.stringifyを使用して追加するようにする方法はありますか？使用する
try {
await sendRequest(
"http://localhost:3001/api/twotts",
"POST",
JSON.stringify({
title: formState.inputs.title.value,
description: formState.inputs.description.value,
creator: auth.userId,
}),
{ Authorization: "Bearer " + auth.token },
{ "Content-Type": "application/json" }
);
history.push("/");
} catch (err) {}
まだ無効な入力があります。Authorization引数を他の場所に置くと、認証の問題が発生します。
見逃した部分がある場合に備えて、リポジトリへのリンクはhttps://github.com/preintercede/Twotter（コミットあり）です。
を作成FormDataして（暗黙的に）送信しContent-Type: multipart/form-dataます。express-validatorそのようなデータをすぐに検証しません（理由：https：//github.com/express-validator/express-validator/issues/276）
1つの解決策はhttps://github.com/expressjs/multerを使用するContent-Typeことですが、他のリクエストですでに行っているように、正しいJSONデータを送信することをお勧めします。
─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
modified: src/twotts/pages/NewTwott.js
─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
@ src/twotts/pages/NewTwott.js:39 @ const NewTwott = () => {
event.preventDefault();
try {
- const formData = new FormData();
- formData.append("title", formState.inputs.title.value);
- formData.append("description", formState.inputs.description.value);
- formData.append("creator", auth.userId);
- await sendRequest("http://localhost:3001/api/twotts", "POST", formData, {
+ await sendRequest("http://localhost:3001/api/twotts", "POST", JSON.stringify({
+ title: formState.inputs.title.value,
+ description: formState.inputs.description.value,
+ creator: auth.userId
+ }), {
Authorization: "Bearer " + auth.token,
+ "Content-Type": "application/json",
});
history.push("/");
} catch (err) {}
これをヘルパー関数にラップすることをお勧めします。これにより、ベアラートークンが存在する場合はリクエストヘッダーに設定される可能性もあります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加