I am currently trying to load vtt files for video subtitles from umbraco media section in our frontend. We use an NextJs Frontend, so the domain of the frontend is not the same as the Umbraco instance. I now get cors errors when i try to load the vtt files. the images and videos are loaded without a problem. Did anyone else have the same problem?

You can add your frontend hostname through the .NET CORS middleware: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-9.0

i already tried that with the help of the exact resource you send and also by following this documentation: https://docs.umbraco.com/umbraco-cms/reference/routing/custom-middleware but i still get a cors error. Maybe this helps: When i try to get the file in the console like this: await fetch('https://localhost:44369/media/25qk4h5t/friday.txt', {method: 'GET'}).then(result => result.text().then(text => console.log(text))); I Get the following error: Cross-source (cross-origin) request blocked: The same-source rule prohibits reading the external resource at https://localhost:44369/media/25qk4h5t/friday.txt. (Reason: CORS header 'Access-Control-Allow-Origin' is missing). Status code: 200.

What did you write in the

Access-Control-Allow-Origin

header? Did you use the

app.AllowAnyOrigin()

or a specific hostname?

i tried both. policy.WithOrigins("localhost:3000"); and .AddCors(options => options.AddPolicy(AllowAnyOriginPolicyName, policy => policy.AllowAnyOrigin())) like in the documentation. i did not map any specific endpoints, since i thought this is done automatically by umbraco.

Umbraco has its own CORS policy, which is done through resolving the backoffice host. If you need another host added, you can do so through the .NET middleware. You will probably need to specify the paths that it applies to. That is outside the Umbraco scope. I'm curious though, are you trying to use the [Media Delivery API](https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api/media-delivery-api) to fetch these files?

What is the actual

Access-Control-Allow-Origin

header sent in the OPTIONS response from

https://localhost:44369/media/25qk4h5t/friday.txt

? Are you adding

AllowCredentials

somewhere? That's forbidden to coexist with

*

origins IIRC. Or maybe the Umbraco Backoffice CORS policy is being used instead of your own policy, which I assume does allow credentials but not

*

origins.

You need to included the scheme and hostname (and optionally the port) in a CORS policy. So 'localhost:4001' is not valid! In the building phase in Program.cs you need to add a CORS policy: builder.Services.AddCors(options => { options.AddPolicy(name: "UmbracoCors", policy => { policy .AllowAnyHeader() .AllowAnyMethod() .WithOrigins("https://localhost:4001"); }); }); After the Umbraco boot, you need to add the CORS middleware, using the name you used when specifying the policy: await app.BootUmbracoAsync(); app.UseCors("UmbracoCors"); And remember that the CORS headers will only show up in the response if the domain is valid for CORS. If it's a domain that is not allowed by cors, you won't see the headers and that caught me out a few times 😉

no, i only get some properties of media items thorugh our backend, so cors is not a problem here.