"No 'Access-Control-Allow-Origin'" call from custom domain with Blazor.NET WASM

What version of gRPC and what language are you using?

gRPC v3 C#

What operating system (Linux, Windows,…) and version?

Linux Ubuntu 18.04 LTS Server hosted on Azure VM

What runtime / compiler are you using

Compiler on Local Machine: .NET Core SDK 3.1.302 Runtime on Server: AspNetCore 3.1.6

Blazor.NET WASM

Google.Protobuf v3.12.3 Grpc.Net.Client.Web v2.30.0 Grpc.Net.ClientFactory v2.30.0 Grpc.Tools v2.30.0

gRPC Service

Grpc.AspNetCore v2.30.0 Grpc.AspNetCore.Web v2.30.0

What did you do?

My Blazor.NET WebAssembly works fine calling grpc in my local machine (https://localhost:5001)

But when I call it from my domain (https://grpc.domain.com) it said:

Access to fetch at ‘https://grpc.blazor.hometemp.bidipeppercrap.com/character.Character/SearchCharacter’ from origin ‘https://localhost:44395’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

When I call with curl, the result is the same for localhost:5000 and http

I use Nginx to proxy pass localhost:5000 to my https domain (ssl configured with certbot)

When I use cURL

Response header from the server (gRPC Service)

---

Blazor.NET Configuration

        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddSingleton(services =>
            {
                var httpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler());

                return GrpcChannel.ForAddress("https://grpc.blazor.hometemp.bidipeppercrap.com", new GrpcChannelOptions { HttpHandler = httpHandler });
            });

            await builder.Build().RunAsync();
        }

---

gRPC Service Configuration

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContextPool<SpellTestContext>(options => options
                .UseMySql(Configuration.GetConnectionString("SpellTestConnection")));

            services.AddGrpc();

            services.AddCors(o => o.AddPolicy("AllowAll", builder =>
            {
                builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding");
            }));
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseGrpcWeb();

            app.UseCors();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGrpcService<CharacterService>().EnableGrpcWeb().RequireCors("AllowAll");

                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");
                });
            });
        }

[wrosenuance]

I had this error and found that I had to add “X-Grpc-Web” and “User-Agent” to the headers exposed to the application by the CORS policy.

services.AddCors(o => o.AddPolicy("AllowAll", builder =>
{
    builder.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
        .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding", "X-Grpc-Web", "User-Agent");
}));

I had started with the original poster’s code so I also had the RequireCors("AllowAll") call referencing the above policy after EnableGrpcWeb().

app.UseRouting();
app.UseGrpcWeb();
app.UseCors();

app.UseEndpoints(endpoints =>
{
  endpoints.MapGrpcService<CharacterService>().EnableGrpcWeb().RequireCors("AllowAll");

  // ...snip... 
});

This seemed to fix things for me! I hope it helps anyone else who winds up here when searching for this error.

[drodic]

I thought it was just part of the nginx.conf file 🙂. And what is localhost: 5000, is that grpc uri server or application uri from which you call grpc service?