CORS Issue in my React app (Laravel 10 Backend)

I’m working on a React app with Laravel 10 as the server-side. I’ve configured the cors.php file in Laravel as follows:

'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],  // Allow all origins
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

When I try to access the audio file via this URL:
http://127.0.0.1:8000/storage/processed_1_1728487168000.mp3

and play it using the following React code:

<audio controls src="http://127.0.0.1:8000/storage/processed_1_1728487168000.mp3">
  Your browser does not support the audio element.
</audio>

The audio plays perfectly fine.

However, when I set the crossOrigin attribute to "anonymous", like this:

<audio controls crossOrigin="anonymous" src="http://127.0.0.1:8000/storage/processed_1_1728487168000.mp3">
  Your browser does not support the audio element.
</audio>

I encounter the following CORS error:

Access to audio at 'http://127.0.0.1:8000/storage/processed_1_1728487168000.mp3' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’m building an app that visualizes the audio, and when I attempt to visualize it without the crossOrigin attribute, I get the error:
MediaElementAudioSource outputs zeroes due to CORS access restrictions.

I’ve already set 'allowed_origins' => ['*'] in the cors.php file. Is there something I’m missing in my CORS configuration, or is there another solution to resolve this issue?

You need to sign in to view this answers