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

Question

実現したいこと

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

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

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

ブラウザ側

Access 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.

サーバ側

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

該当のソースコード

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

  function WebApiPost(){
    let postData = {
      "title": "Baby",
      "category": "Pops",
      "release_date": "2020-01-07"
    };

    const uri = "http://localhost:8080/files/uploadfiles/json";
    const params = {
      method:"POST",
      header:{
        "Content-Type": "application/json",
        //"Connection": "keep-alive"
      },
      body: JSON.stringify(postData),
      //mode: "cors",    
      //withCredentials: true,
      //crossorigin: true
    };
    fetch(uri, params).then((response) => {
      console.dir(response);
      return response;
    }).then((result) => {
      if(result.ok) {
        return result.json();
      }else{
        throw new Error("リクエスト失敗");
      }
    }).then((json) =>{
      console.log(json);
    }).catch((error) => {
      console.warn(error);
    })
  }

// 呼び出し側
<button onClick={WebApiPost}>bbbbb</button>

WebAPI側

@RequestMapping("/files")
@RestController
//@CrossOrigin(origins = "http://localhost:3000")
public class WebApiFileUpload {
    
    
    @PostMapping("/uploadfiles/json")
    //@CrossOrigin(origins = "http://localhost:3000")
    public ResponseEntity<FileUploadResponse> jsonUploadFiles(@RequestBody HashMap body) {

        System.out.println(body);
        var ret = new FileUploadResponse();
        ret.setFileName("hogehoge");
        ret.setSize(0);
        ret.setDownloadUri("/downloadfile");

        var headers = new HttpHeaders();
        var response = new ResponseEntity<FileUploadResponse>(ret, HttpStatus.OK);
        return response;

    }
}

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

ブラウザ側

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

サーバ側

Resolved [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があればご紹介頂きたいです。

最後に

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

Answer 1

ポートを揃えることはできないという想定でよろしいですよね？
httpサーバー側でhttpヘッダのAccess-Control-Allow-Originに"*"を指定してあげるか、もしくは適切なサーバー名を指定してCredentialsを指定してあげてください

Answer 2

ご回答ありがとうございます。
サーバ側でAccess-Control-Allow-Originの設定で問題ありませんでした。

問題をややこしくしていたのが、javascript側のheader指定で、

header:{}

になっていたのを

headers:{}

に直したら無事動作しました。
お手数をおかけして申し訳ございませんでした。