I'm building a React application, and I need to load audio files from Google Drive. I have the following audio URLs in json:
{
"audio1.mp3": "https://drive.google.com/uc?id=1nlL_goM_u_4gBspLg_GVpFBAp4P1qPsT",
"audio2.mp3": "https://drive.google.com/uc?id=1WoP8fcWeFlCKqNGOtr0Qt5oaBiP53UsH"
}
However, when I attempt to load the audio files in my app, I encounter a CORB (Cross-Origin Read Blocking) error in the browser’s console, preventing the audio files from being played.
I understand that CORB is blocking the response because Google Drive is serving these files with a Content-Type header that doesn't match the actual file type (audio/mpeg, for example). I also read that CORB is designed to prevent XSS (Cross-Site Scripting) attacks by blocking certain types of cross-origin requests.
Has anyone faced a similar issue? How can I work around the CORB block and successfully load the audio files from Google Drive? Is there a way to configure Google Drive's headers, or should I host the audio files elsewhere to resolve this issue?
Any help would be appreciated!
Unfortunately, you can't change the response headers for files served by Google Drive. This means you won't be able to adjust the Content-Type or CORS settings to suit your needs.
things you can try out :