C#•3mo ago

Azure Static Web App (Blazor) problem with CORS

Hello, I have been developing a blazor wasm app that uses multi threading. The problem is that I don't know how can i set these headers Cross-Origin-Embedder-Policy:require-corp & Cross-Origin-Opener-Policy:same-origin. I tried to set them like the docs suggested in staticwebapp.config.json like:

{
  "globalHeaders": {
    "Cross-Origin-Embedder-Policy": "require-corp",
    "Cross-Origin-Opener-Policy": "same-origin"
  }
}

{
  "globalHeaders": {
    "Cross-Origin-Embedder-Policy": "require-corp",
    "Cross-Origin-Opener-Policy": "same-origin"
  }
}

Still the headers are not set, but the workflow run passes anyway. In local using dotnet serve it works that way:

dotnet serve -h "Cross-Origin-Opener-Policy:same-origin" -h "Cross-Origin-Embedder-Policy:require-corp" --directory bin\Release\net9.0\publish\wwwroot

What am I doing wrong? Can somebody please give me a working staticwebapp.config.json? Thank you 🙂 PS: The app is full client side, no api calls.

11 Replies

v0fbu1vm•3mo ago

@kopale. Have you configured cors?

kopale.OP•3mo ago

Eeeh, I thought setting the json file is going to be enough. I just deployed the app used that config file. Where should I set that? This is my first time using azure 😅 .

v0fbu1vm•3mo ago

I have this

/// <summary>
///     Configures CORS (Cross-Origin Resource Sharing) for the ASP.NET Core application.
/// </summary>
public sealed class CorsRegistrant : ServiceRegistry
{
    public override void ConfigureServices(WebApplicationBuilder builder)
    {
        base.ConfigureServices(builder);

        // Add CORS services and define a policy named "AllowAll" that allows requests from any origin, method, and header.
        builder.Services.AddCors(options =>
        {
            options.AddPolicy("AllowAll", policy =>
            {
                policy.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
            });
        });
    }

    /// <summary>
    ///     Configures CORS middleware to allow cross-origin requests.
    /// </summary>
    /// <param name="app">The web application.</param>
    public override void Configure(WebApplication app)
    {
        base.Configure(app);

        // Use CORS middleware with the "AllowAll" policy to allow cross-origin requests.
        app.UseCors("AllowAll");
    }
}

/// <summary>
///     Configures CORS (Cross-Origin Resource Sharing) for the ASP.NET Core application.
/// </summary>
public sealed class CorsRegistrant : ServiceRegistry
{
    public override void ConfigureServices(WebApplicationBuilder builder)
    {
        base.ConfigureServices(builder);

        // Add CORS services and define a policy named "AllowAll" that allows requests from any origin, method, and header.
        builder.Services.AddCors(options =>
        {
            options.AddPolicy("AllowAll", policy =>
            {
                policy.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
            });
        });
    }

    /// <summary>
    ///     Configures CORS middleware to allow cross-origin requests.
    /// </summary>
    /// <param name="app">The web application.</param>
    public override void Configure(WebApplication app)
    {
        base.Configure(app);

        // Use CORS middleware with the "AllowAll" policy to allow cross-origin requests.
        app.UseCors("AllowAll");
    }
}

I have something like this. It depends on your use case. Add cors to the service collection.

kopale.OP•3mo ago

Oh the app is blazor wasm and its not hosted, like no kestrel, the azure static web app serves the app i have to configured at there somehow

v0fbu1vm•3mo ago

@kopale. Take a look at this https://learn.microsoft.com/en-us/answers/questions/902766/cors-policy-with-wasm

CORS Policy with WASM - Microsoft Q&A

What is the requirement to have Blazor WASM call Web API hosted on the web server.
I have Web API hosted already on the web server which is good with Blazor server app,
Now I have the same service called by Blazor WASM, i get teh following error …

kopale.OP•3mo ago

Thank you but like i said the host is the azure static web app, so i cant set cors in code because it is served by a file server (in my case azure) https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-9.0#standalone-deployment

Host and deploy ASP.NET Core Blazor WebAssembly

Learn how to host and deploy Blazor WebAssembly using ASP.NET Core, Content Delivery Networks (CDN), file servers, and GitHub Pages.

kopale.OP•3mo ago

So there is no "host" in my code so I cant set cors there, thats why im tinkering in staticwebapp.config.json file Like in my example on local im serving/"hosting" the app via dotnet serve Jesus... the Azure documentation to put it lightly is so scattered all around. I tired bunch of configs, none of seems to work. Later I tried Cloudflare Pages and its working. You have to create and set '_headers' file (just paste this):

/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

Deploy and boom it is working as expected. Still I would like to host it on Azure, can anybody help? Thank you 🙂

lycian•3mo ago

I'm not an expert but I think I got it working

lycian•3mo ago

this was with a slight modification to the template https://github.com/ryzngard/WASM_Static

GitHub

GitHub - ryzngard/WASM_Static

Contribute to ryzngard/WASM_Static development by creating an account on GitHub.

kopale.OP•3mo ago

@lycian Thank you for taking the time to create an example 🙂 , I'm going to try it again later today

kopale.OP•3mo ago

@lycian It works! Awesome, thank you again. 🙂 I believe the issue occurred because when Azure generated the configuration file through the online editor, it placed the file in the root of the GitHub repository instead of inside the intended app path (my case ./src/{ClientFolder}), even though I specified that path in the App location setting when creating the service.

Gaming

Programming

Azure Static Web App (Blazor) problem with CORS

Did you find this page helpful?