x-wp-nonce is not allowed by Access-Control-Allow-Headers in preflight response

Question

I would like my dev server on http://localhost:8080 to work with my wordpress install's rest api, of which the api base url is at http://localhost/wptest2/index.php/wp-json/ I am currently getting the title error when I try to make requests through the dev server:

Access to fetch at 'http://localhost/wptest2/index.php/wp-
json/plugin/load?limit=10&offset=0'
 from origin 'http://localhost:8080' has been blocked
 by CORS policy: Request header field x-wp-nonce is not
 allowed by Access-Control-Allow-Headers in preflight response.

In my plugin's entry file I have the following:

function add_cors_http_header() {
  header("Access-Control-Allow-Origin: *");
}
add_action('init', __NAMESPACE__ . '\\' . 'add_cors_http_header');

I thought this would enable cross domain requests but apparently it is not enough, at least for x-wp-nonce.

Is there anything more that can be done to enable the dev server to accept my nonce header?

Update

There is no change after adding Access-Control-Allow-Headers : * to the cors setting function:

function add_cors_http_header() {
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Headers: *");
  header("Access-Control-Max-Age: *");
}

Update 2

Here is the OPTIONS request:

Update 3

Now the X-WP-Nonce header is set to append instead of replace, the function is hooked to rest_pre_serve_request, and it's added as a filter instead of action:

function add_cors_http_header() {
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Headers: X-WP-Nonce", false);
}
add_filter('rest_pre_serve_request', __NAMESPACE__ . '\\' . 'add_cors_http_header');

I now get 403 Forbidden

I have copied the cookie name wordpress_logged_in_69cb7e12fd<removed> and its value to the dev server domain at localhost:8080 but this does not change the response.

Update 4

The nonce I use is freshly copied from my wordpress session in another tab that creates the nonce and localizes it into the react.js app. This React.js script file is built using npm run build and hooked to admin_footer. It is a slightly older version of the script.

The newest React.js script is in another tab on localhost:8080 The nonce is put into React manually and sent as a request like so:

// globals.js
// this file is loaded by index.jsx, the top level component file

global.clientNonce = "5d6352af1d";


// in Chrome browser, tab open to localhost:8080
console.log(clientNonce) // "5d6352af1d"


// ViewCoupons.jsx, back in the IDE
// this file is loaded by index.jsx. clientNonce is passed down as a prop

const fetchAllCoupons = async (limit, offset) => {
    try {
      const response = await fetch(`${apiBaseUrl}/${namepaceAndVersion}/load?limit=${limit}&offset=${offset}`, {
        method : 'get'
        , headers : {
          'X-WP-Nonce' : clientNonce
        }
      });
      let data = await response.json();

      if (data && 'error' in data) {
        setSnackbarMessage(data.error)
      }

      return data;
    }
    catch (e) {
      // console.log(e, `=====error=====`);
      throw e;
    }
  };