質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

React.jsにおけるPOSTの値がNULLになる

cantama
cantama

総合スコア18

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

394閲覧

投稿2022/01/05 23:14

前提・実現したいこと

reactjsからのPOSTの値に対して、spring bootでカスタムバリデーションを行いたいのですが、フロントエンドから送信されたRequestの中身がnullとして扱われ@NotNullアノテーションに引っ掛かってしまいます。

発生している問題・エラーメッセージ

バックエンド側のエラー

WARN .m.m.a.ExceptionHandlerExceptionResolver : Resolved [org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public org.springframework.http.ResponseEntity<com.example.main.response.Response> com.example.main.controllers.Controller.process(com.example.main.requests.Request) throws java.lang.Exception with 2 errors:

フロント側では、Responseに@NotNullのメッセージが格納されたfieldErrorsが返ってきます。

該当のソースコード

form.js

javascript

//エラーメッセージ const [firstError, setFirstError] = useState(''); const [lastError , setLastError ] = useState(''); const handleSubmit = (evt) =>{ evt.preventDefault(); fetch("http://localhost:8080/api/send", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", "X-AUTH-TOKEN":'Bearer '+getToken(),//JWTトークン }, body: JSON.stringify({ First: formData.get('First'), Last: formData.get('Last'), }), }) .then((response)=> response.json()) .then((data) => { if(data.fieldErrors) { data.fieldErrors.forEach(fieldError => { if(fieldError.field === 'First'){ setNodeError(fieldError.message); } if(fieldError.field === 'Last'){ setNetError(fieldError.message); } }); } else { alert("success") } }).catch((err) => err); const onFirstFocus = (e) =>{ e.preventDefault(); setFirstError(''); } const onLastFocus = (e) =>{ e.preventDefault(); setLastError(''); } return( <form className="col" onSubmit={handleSubmit} noValidate={false}>   <input className="form" type="text" value="" onFocus={onFirstFocus} name="First"/>   {   firstError ? <span style={{ color: 'red', fontSize: '12px'}}>{firstError}</span> : ''   }   <input className="form" type="text" value="" onFocus={onLastFocus} name="Last"/>   {   lastError ? <span style={{ color: 'red', fontSize: '12px'}}>{lastError}</span> : ''   }   <button type="submit">送信</button> </form> )

Request.java

java

@Data public class Request{ @NotNull(message = "First is required.") @Pattern(regexp="^[1-9]|[1-9][0-9]|[1-4][0-9]{2}|500$",message = "First is outside the range.")//500まで private String First; @NotNull(message = "Last is required.") @Pattern(regexp="^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$",message = "Last is invalid.")//IPv4 private String Last; }

Controll.java

java

@RestController @RequestMapping("/api") @CrossOrigin(origins = "http://localhost:3000") public class AuthenticationController { @PostMapping("/send") public ResponseEntity<Response> process(@Validated @RequestBody Request Request) throws Exception{ Response Response = new Response(); Response.setData("ok !"); return ResponseEntity.ok(Response); } }

ControllerErrorHandler.java

java

@ControllerAdvice public class ControllerErrorHandler extends ResponseEntityExceptionHandler { @Override protected ResponseEntity<Object> handleMethodArgumentNotValid(MethodArgumentNotValidException ex, HttpHeaders headers, HttpStatus status, WebRequest request) { FieldErrorResponse fieldErrorResponse = new FieldErrorResponse(); List<CustomFieldError> fieldErrors = new ArrayList<>(); ex.getBindingResult().getAllErrors().forEach((error) -> { CustomFieldError fieldError = new CustomFieldError(); fieldError.setField(((FieldError) error).getField()); fieldError.setMessage(error.getDefaultMessage()); fieldErrors.add(fieldError); }); fieldErrorResponse.setFieldErrors(fieldErrors); return new ResponseEntity<>(fieldErrorResponse, headers, status); } }

CustomFieldError.java

java

public class CustomFieldError { private String field; private String message; }

FieldErrorResponse.java

java

public class FieldErrorResponse { private List<CustomFieldError> fieldErrors; }

Getter,Setterは省略しています。

###試したこと
Request.java内のアノテーションをすべて外しControllクラス内でformからのリクエストを確認しましたが、First,Lastどちらの値もnullになっていました。

補足情報(FW/ツールのバージョンなど)

SpringBoot version : 2.6.2

package.json

"dependencies": { "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "axios": "^0.24.0", "bootstrap": "^5.1.3", "react": "^17.0.2", "react-bootstrap": "^2.0.4", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "redux": "^4.1.2", "styled-components": "^5.3.3", "web-vitals": "^2.1.2" },

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/01/05 23:21

stringifyすると単なる文字列になるように思うのですが、stringifyなしだとどうでしょうか。
cantama

2022/01/05 23:41

stringifyなしというのが分からないのですが、 JSON()で送信した場合は、JSON is not a functionとなりました。 また、PostmanでJSONにして送りましたが、nullが返ってきました。
m.ts10806

2022/01/06 00:51

いえ body: JSON.stringify({ First: formData.get('First'), Last: formData.get('Last'), }), ↓ body: { First: formData.get('First'), Last: formData.get('Last'), },
m.ts10806

2022/01/06 00:51

ただ、見た感じbodyにそのままformDataを指定するだけで良いような
cantama

2022/01/06 01:27

body: { First: formData.get('First'), Last: formData.get('Last'), }, で送信しましたが、 http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type `com.example.main.requests.Request` from Array value (token `JsonToken.START_ARRAY`); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize value of type `com.example.main.requests.ApiRequest` from Array value (token `JsonToken.START_ARRAY`)<EOL> at [Source: (PushbackInputStream); line: 1, column: 1]] 逆シリアル化に失敗と出ました。 この場合はどう対処すればいいのでしょうか?
m.ts10806

2022/01/06 03:14

となると、 body:formData, でも同じですかね。 formDataに想定の値は入ってきてますか? 何も入ってなければnullと判断されるのは合点がいきます
cantama

2022/01/06 04:14

Requestクラスの変数定義に頭文字を大文字にしており、そのGetter名とSetter名と重複していたためにPOST出来ていなかった可能性がありました。 ちゃんと確認しておりませんが、頭文字をすべて小文字に訂正することでエラーが起きなくなりました。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。