Cors issue local xampp server and react frontend

I have a local Xampp running on http://localhost (port 80) This server provides an api in folder kiosk2/api (root file api.php)

The .htaccess file in this folder is

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule !^src($|/) api.php [L]

I have a react app running using vite on localhost:5173

When I fetch an endpoint without adding headers, it works fine

const res = await fetch(`http://localhost/kiosk2/api/items`);

However, when I use another request and try to add an authorization token, I get a cors error.

const rawResponse = await fetch(url, {
    headers: {
      Authorization: "Basic " + btoa(user + ":" + password),
    },
  });

gives the following error in the browser:

Access to fetch at 'http://localhost/kiosk2/api/login' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Can anybody help me out?

Allow Authorization header in Access-Control-Allow-Headers

Update .htaccess

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Authorization, Origin, X-Requested-With, Content-Type, Accept"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule !^src($|/) api.php [L]