CORS error with XAMPP API and Vite React frontend

Frontend
1

Local XAMPP API (port 80) and Vite React app (port 5173) work fine without headers but fail with an auth header due to CORS. Revised samples below.

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type, Accept, X-Custom"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^service/?$ handler.php [L]

const apiResponse = await fetch('http://localhost/service/products', {
  headers: {
    Auth: 'Basic ' + btoa(myUser + ':' + myPass)
  }
});
2

Based on my experience, the issue is likely due to not explicitly allowing the custom header used in your fetch call. I resolved a similar problem by adding the header name (in your case, Auth) to the Access-Control-Allow-Headers directive. Furthermore, I verified that the preflight request (OPTIONS) was appropriately handled by my server. Adjustments in the Apache configuration to include the Auth header in the allowed list and ensure proper preflight response almost always resolve such issues. It is also worth confirming that the client’s request settings conform to the server’s CORS policy.

3

hey, i fixed mine by double checking the header names. sometimes casing causes issues with cors even if it seems ok. also, ensuring the handler manages preflight (OPTIONS) calls solved it. try lookin at your logs for rejected header details. cheers

4

hey, maybe its not just header naming but also some caching issues with preflight reqs. i played around with allow-credentials and tweaking apache settings - cleared some caching glitches for me. what do u see in your log? any experiments working for u?