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?