Why does my app serve an .mp3 file correctly from localhost, but return a 404 when deployed to Azure?

Question

I've a static web app created using Blazor in Visual Studio 2022.

A static audio (.mp3) resource (located at wwwroot/audio/abc.mp3) is recognised and plays when using IIS Express / https localhost, but is not found in the Azure-deployed version.

No issues with .jpg resource located at wwwroot/images/xyz.jpg

I have added .mp3 to mimeTypes in staticwebapp.config.json, but still no joy.

Any pointers would be very welcome.

Answer 1

My guess is that azure static web sites don't support range requests (use curl or other to try fetch without range). if so, you will need to use azure blob storage for hosting the mp3 files.

Answer 2

Hello Tim Dale,

Welcome to the Microsoft Q&A and thank you for posting your questions here.

I understand that you would like to resolve the issue with your app served an .mp3 file correctly from localhost but return a 404 when deployed to Azure.

The answers from @Bruce (SqlWork.com) and Tiny Wang-MSFT are valid points even, mp3 might be excluded during the build process, which is a common issue in Azure deployments. I provide you here with steps to check through one after the other, what you can troubleshoot and some links to review for permanent solution.

1. Double-check that the .mp3 MIME type is correctly configured in your staticwebapp.config.json:

           {
             "mimeTypes": {
               ".mp3": "audio/mpeg"
             }
           }
   

2. Ensure the file path and name are correct and match the case exactly.
3. Use KUDU to check if the .mp3 file exists in the wwwroot/audio directory and access the resource URL directly to see if it can be fetched. This will help in verifying deployment artifacts.
4. Ensure the CORS policy allows requests to the .mp3 file.
5. Ensure staticwebapp.config.json is correctly placed in the root of the repository.
6. Clear the browser cache or use incognito mode to rule out caching issues.
7. If range requests are required, consider hosting the .mp3 files in Azure Blob Storage.
8. Restart the app after making changes to ensure configurations are applied.

By following the above steps, you should be able to resolve the issue with the .mp3 file not being found in the Azure-deployed version of your Blazor static web app. If the issue persists, reviewing the deployment logs for any errors or warnings can provide further insights -

• https://learn.microsoft.com/en-us/azure/static-web-apps/troubleshooting
• https://techcommunity.microsoft.com/blog/azurepaasblog/troubleshooting-common-issues-in-azure-storage-static-websites/3803156
• https://learn.microsoft.com/en-us/answers/questions/1188385/video-files-wont-play-from-azure-hosted-website

I hope this is helpful! Do not hesitate to let me know if you have any other questions.

---

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful.