fetchでSpringBootのWebAPIを呼び出す際に発生するCORSエラー等の解決方法

実現したいこと

SpringBootで作成したWebAPIをブラウザのJavaScriptから呼び出しPOST、GET、PUT、DELETEの各処理を実行する。

前提

SpringBootで作成したWebAPIの呼出しは、curlコマンドとpostmanで動作確認しています。
画面でfetchで呼び出した際にCORSエラーが発生します。

環境

WSL2
Description: Ubuntu 20.04.6 LTS

クライアントもサーバ側も同一のWSL上で動作しています。
クライアント: http://localhost:3000
サーバ: http://localhost:8080

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

発生した際のエラーは以下のようなエラーです。

ブラウザ側

text

1Access to fetch at 'http://localhost:8080/files/uploadfiles/json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

サーバ側

text

1Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'text/plain;charset=UTF-8' is not supported]

該当のソースコード

ブラウザ側はReactで作成していますが、以下のようなボタンをクリックするだけの処理です。
(まだ実装の調査中)

javascript

1 function WebApiPost(){2 let postData = {3 "title": "Baby",4 "category": "Pops",5 "release_date": "2020-01-07"6 };7 8 const uri = "http://localhost:8080/files/uploadfiles/json";9 const params = {10 method:"POST",11 header:{12 "Content-Type": "application/json",13 //"Connection": "keep-alive"14 },15 body: JSON.stringify(postData),16 //mode: "cors", 17 //withCredentials: true,18 //crossorigin: true19 };20 fetch(uri, params).then((response) => {21 console.dir(response);22 return response;23 }).then((result) => {24 if(result.ok) {25 return result.json();26 }else{27 throw new Error("リクエスト失敗");28 }29 }).then((json) =>{30 console.log(json);31 }).catch((error) => {32 console.warn(error);33 })34 }35 36// 呼び出し側37<button onClick={WebApiPost}>bbbbb</button>

WebAPI側

java

1@RequestMapping("/files")2@RestController3//@CrossOrigin(origins = "http://localhost:3000")4public class WebApiFileUpload {5 6 7 @PostMapping("/uploadfiles/json")8 //@CrossOrigin(origins = "http://localhost:3000")9 public ResponseEntity<FileUploadResponse> jsonUploadFiles(@RequestBody HashMap body) {10 11 System.out.println(body);12 var ret = new FileUploadResponse();13 ret.setFileName("hogehoge");14 ret.setSize(0);15 ret.setDownloadUri("/downloadfile");16 17 var headers = new HttpHeaders();18 var response = new ResponseEntity<FileUploadResponse>(ret, HttpStatus.OK);19 return response;20 21 }22}23

その後CROSエラーの解決の為、CrossOriginを追加してみたところ、エラー内容が変わりましたがアクセスはできません。
(Java側のコメントアウトされている部分)

ブラウザ側

App.js:55 POST http://localhost:8080/files/uploadfiles/json 415

サーバ側

text

1Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'text/plain;charset=UTF-8' is not supported]

質問内容

1. CORSエラーの解決方法としてはCrossOriginの属性で問題ない？
2. サーバ側でtext/plainとなっているが、クライアント側のHeaderでContent-Typeの指定方法が間違っているかその他の理由があるのか？
3. CORSエラーの内容についてはとりあえずで調査しているのでお勧めの本やHPがあればご紹介頂きたいです。

最後に

最後まで読んで頂きありがとうございます。
どなたかわかる方がいらっしゃれば、ご回答よろしくお願いいたします。