CORS problem between local XAMPP API and React application

Frontend and Backend Development
1

Using a local Apache server (port 80) with an API and a Vite React app (5173), unauthenticated calls work but adding auth headers triggers a CORS error.

const result = await fetch('http://localhost/newapi/verify', {
  headers: { 'X-AuthToken': 'Basic ' + btoa('username:password') }
});
2

The situation often arises from the fact that the server must explicitly allow custom headers. In my experience, Apache configurations needed to include the X-AuthToken header in the Access-Control-Allow-Headers directive to work properly. I encountered a similar issue where simply modifying the .htaccess was insufficient until I also cleared the browser cache and restarted the server. This adjustment allowed the authentication process to complete successfully without triggering the CORS error.