Spring Boot Allow CORS for 400 BAD REQUEST responses

This issue is bugging me from entire day today. I am not being able to read response body when server (Spring Boot) is sending a 400 BAD REQUEST response.

From the best of my knowledge, the access control headers in the response looks good and client should be allowed to read the body.

Technical details now.

My ReactJs application endpoint is http://localhost:3000/ which I use in browser to access the web app.

Client (ReactJs) application is sending an OPTIONS request (Preflight) first and server is returning 200 OK response with below headers.

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization, content-type
access-control-allow-methods: PUT, GET, HEAD, POST, DELETE, OPTIONS
access-control-allow-origin: http://localhost:3000
Access-Control-Max-Age: 1800
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Tue, 25 Apr 2023 10:24:39 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Now the headers from the main POST request:

Access-Control-Allow-Credentials: true
access-control-allow-methods: PUT, GET, HEAD, POST, DELETE, OPTIONS
access-control-allow-origin: http://localhost:3000
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: close
Content-Length: 101
Content-Type: application/json
Date: Tue, 25 Apr 2023 10:24:39 GMT
Expires: 0
Pragma: no-cache
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

If I print the response using JSON.stringigy(...) then I get an empty object as {}.

If I print the response object directly. I see it like.
enter image description here

Response tab also appears as blank in Chrome Developer Tools (Network tab)
enter image description here

What I have tried:

  1. In postman, response body is returned properly as expected.
  2. Added a filter to log response from server side just to verify if it is server is actually sending the response. I can see the expected response printed.
  3. Tried Edge. Same issue.
  4. Response Body is properly readable for GET requests as well POST requests as long as response status is 200 OK. I can see the issue is only appearing when server is sending 400 BAD REQUEST response.

Below is my client-side source code. I do not have anything related to cors in my request.

fetch(`${API_ROOT}/xxx/schedule`, {
  method: "POST",
  body: postData,
  headers: {
    Authorization: `Bearer ${context.user.token}`,
    "Content-Type": "application/json",
  },
})
  .then(function (response) {
    console.log(JSON.stringify(response));
    console.log(response);
    if (!response.ok) {
      throw response;
    }
    return response.json();
  })
  .then(function (text) {
    toast.success("New record is added successfully.");
  })
  .catch(function (error: ErrorResponse) {        
    toast.error(
      <div>
        Error adding Schedule. <br />
        {error.message}
      </div>
    );
    console.log(["Error adding Schedule.", error]);
  });

Please let me know if more information is required.