.NET 6 Blazor WASM getting CORS errors when trying to connect to Azure Key Vault

Question

I'm having issues with getting a default Blazor WebAssembly Core 6 project to connect to Azure Key Vault so that I can store application specific data, like API Tokens and Connection Strings, etc...

I don't want a user to have a certificate installed on their device, I want it so that the Certificate is installed on Azure Active Directory and Azure Key Vault since the Application needs the secrets and not the user.

I've done the following:

Azure Active Directory

• Registered an application
• Uploaded x509 Certificate
• Created a Single-page Application platform

Azure Key Vault

• Granted access to Azure Active Directory registered application
• Uploaded x509 Certificate
• Granted access to Secrets

I'm deploying the test application to our development server, not hosting the application in Azure, and here is the code I am using.

I'm not sure what I am doing wrong but I've spent a lot of time looking and looking and cannot find a solution that

program.cs

using AzureKeyVaultTestCore6;  
using Azure.Identity;  
using Microsoft.AspNetCore.Components.Web;  
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;  
  
var builder = WebAssemblyHostBuilder.CreateDefault(args);  
string _corsPolicyName = "AllowAll";  
  
builder.Services.AddCors(options =>  
{     
    options.AddPolicy(name: _corsPolicyName, builder =>   
                                             builder.AllowAnyOrigin()  
                                                    .AllowAnyMethod()  
                                                    .AllowAnyHeader()  
                                                    .AllowCredentials()  
                     );  
});  
  
builder.Configuration.AddAzureKeyVault(  
    new Uri($"https://{builder.Configuration["KeyVault:Vault"]}.vault.azure.net/"),  
  
    new ClientCertificateCredential(  
        builder.Configuration["KeyVault:TenantId"],  
        builder.Configuration["KeyVault:ClientId"],  
        builder.Configuration["KeyVault:ThumbPrint"]  
    )  
);  
  
builder.RootComponents.Add<App>("#app");  
builder.RootComponents.Add<HeadOutlet>("head::after");  
  
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });  
  
await builder.Build().RunAsync();

Answer 1

It makes no sense for a client browser app to access the key vault. Anyone can get the access keys from the browsers debug tools and access all key vault data. For this reason CORS is not supported.