react-fook-formのonSubmitでRust AxumへPostすると、422 (Unprocessable Entity)エラー

Question

実現したいこと

Rust Axumで実装するアプリケーションのログイン画面などのフォームバリデーションをreact-fook-formで実装したい

発生している問題・分からないこと

入力フォームから送信ボタンを押してPostしようとすると、422 (Unprocessable Entity)　エラーが発生し、Postできない。
Reactと、Rust Axumのソースコードは以下の通りです。

エラーメッセージ

http://192.168.33.10:3000/login 422 (Unprocessable Entity)

※↑入力フォーム側のConsole上のエラーメッセージ。Axum側では、以下のようにRunningとなったままで、Requestを受け付けたログなどははかれていない。

    Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.77s
     Running `target/debug/axum`

該当のソースコード

import './App.css';
import { useForm } from 'react-hook-form';
import React from 'react';

function App() {
  const { register, 
  handleSubmit,
  formState: {errors},
  } = useForm({
    criteriaMode: 'all',
  });

  const onSubmit = (data) => {
    const formData = new FormData(data);
    // formData.append("username", data.username);
    // formData.append("password", data.password);
    fetch("./login", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: formData
    });
    console.log(formData);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
          <div class="mb-3 mt-3">
          <input type="text" class="form-control" placeholder="user name" {...register('username', { 
            required: {
              value: true,
              message: 'This is a required field.',
            },
            minLength: {
              value: 6,
              message: 'Please enter at least 6 characters.'
            },
            maxLength: {
              value: 20,
              message: 'Please enter less than 20 characters.'
            },
            pattern: {
              value: /^[A-Za-z0-9_]+$/,
              message: 'Please enter alphanumeric characters only.'
            }
            })}/>
            {errors.username?.type === 'required' && (<div class="fs-s error-msg">{errors.username.types.required}</div>)}
            {errors.username?.type === 'minLength' && (<div class="fs-s error-msg">{errors.username.types.minLength}</div>)}
            {errors.username?.type === 'maxLength' && (<div class="fs-s error-msg">{errors.username.types.maxLength}</div>)}
            {errors.username?.type === 'pattern' && (<div class="fs-s error-msg">{errors.username.types.pattern}</div>)}
          </div>
          <input type="password" class="form-control" placeholder="password" {...register('password', { 
            required: {
              value: true,
              message: 'This is a required field.',
            },
            minLength: {
              value: 8,
              message: 'Please enter at least 8 characters.'
            },
            maxLength: {
              value: 25,
              message: 'Please enter less than 25 characters.'
            },
            pattern: {
              value: /^[A-Za-z0-9_]+$/,
              message: 'Please enter alphanumeric characters only.'
            }
            })}/>
            {errors.password?.type === 'required' && (<div class="fs-s error-msg">{errors.password.types.required}</div>)}
            {errors.password?.type === 'minLength' && (<div class="fs-s error-msg">{errors.password.types.minLength}</div>)}
            {errors.password?.type === 'maxLength' && (<div class="fs-s error-msg">{errors.password.types.maxLength}</div>)}
            {errors.password?.type === 'pattern' && (<div class="fs-s error-msg">{errors.password.types.pattern}</div>)}
          <span class="fs-s">If you don't have account, you can <a href="/signup">Sign up</a>.</span><br/>
          <input type="submit" class="btn submit" value="login" />
       </form>
    </div>
  );
}

export default App;

#[derive(Serialize, Deserialize)]
struct LoginForm {
    username: String,
    password: String,
}

#[tokio::main]
async fn main() {

    let serve_dir = ServeDir::new("static").not_found_service(ServeFile::new("static"));

    let app = Router::new()
        .route("/", get(handle_index))
        .route("/login", post(handle_api))
        .nest_service("/static", serve_dir.clone())
        .fallback_service(serve_dir);

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

async fn handle_api(axum::Form(loginform): axum::Form<LoginForm>)-> axum::response::Html<String> {

    let tera = tera::Tera::new("templates/*").unwrap();

    let mut context = tera::Context::new();
    context.insert("title", "Index page");

    let output = tera.render("app.html", &context);
    axum::response::Html(output.unwrap())
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Rust Axum側は、普通のHTMLファイルのformの場合は問題なくデータを受け取ることができるので、Reactの onSubmit の中の書き方が問題ではないかと色々試したが、うまくいなかい。

最初、new FormData(data);　とせずに、body: data　としていたが、うまくいなかった。

補足

特になし

Answer 1

JSON データの形式が間違っているか、必須フィールドが欠落している可能性があります。 JSON 構造を再確認し、必要なフィールドがすべて含まれており、正しく入力されていることを確認してください。

Comments

[DeepRoastBeans]

ありがとうございます。onSubmitで送るデータをFormDataではなくJson形式に変更し、axum側もjsonで受け取るようにしたら、POSTできました。以下はソースコードの修正箇所です。
ただ、作っているアプリケーションで、一部の入力フォームでファイルのアップロードもあるので、全てjson形式でPostするという仕様は厳しそうな気がしています。。一応解決しましたので、クローズします。

// react
const onSubmit = (data) => {
var formData = JSON.stringify(data);
fetch("./login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: formData
})
.then(
window.location = './home'
)
console.log(formData);
};

// axum
async fn handle_login(Json(payload): Json<LoginForm>) {
let username = payload.username;
let password = payload.password;
println!("username:{}, password:{}", username, password);
}

// コマンドライン
$ cargo run
Compiling axum v0.1.0 (/home/vagrant/dev/rust/axum)
Finished `dev` profile [unoptimized + debuginfo] target(s) in 5.13s
Running `target/debug/axum`
username:asdfggggg, password:asdfggggg