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

Question

前提・実現したいこと

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

//エラーメッセージ
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

@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

@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

@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

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

FieldErrorResponse.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"
  },

Comments

[m.ts10806]

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

[nuIIpo]

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

[m.ts10806]

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

↓
body: {
First: formData.get('First'),
Last: formData.get('Last'),
},

[m.ts10806]

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

[nuIIpo]

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]

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

[nuIIpo]

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

Answer 1

@Data
public class Request{

private String first; //First => first

private String last; //Last => last

}
Getter名とSetter名がそれぞれFirst,Lastとなって重複していたので、頭文字を小文字に訂正