Setting up CORS for localhost with Azurite

I am currently working on a React web application that requires some videos to play. I've stored the videos and their caption files on Azure Storage. I'm using Azurite to debug and test locally. I have a Web API using C# that creates a SAS URL for the files and those links are passed to the web frontend.

The video loads fine without issue, but the caption files require that I set the crossOrigin attribute to anonymous. Once I do that, I am unable to retrieve either file as CORS is not set up for Azurite.

My question is this: is there a way to set up CORS to allow the local web host to connect to the local azurite host?

I note that I was able to get this working when I used Azure Storage, so if I can get CORS to work properly with azurite, I know that what I am doing will work.

The Web API is built using Azure Functions and Visual Studio while the React Web application is developed using Visual Studio Code and runs locally. The Azurite host is run when I run the Azure Functions locally.

When I run without the crossOrigin attribute on the video tag, I get the following message: Unsafe attempt to load URL 'http://127.0.0.1:10000/devstoreaccount1/<location of track file>' from frame with URL 'http://localhost:3000/'. Domains, protocols and ports must match.

When I run with the crossOrigin attribute, I get the following message for both files: Access to text track at 'http://127.0.0.1:10000/devstoreaccount1/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Azure / Azurite

Setting up CORS for localhost with Azurite #2505