SignalR Core works on localhost but not on Azure App Service

Question

I have a client program (WPF app on .Net 4.8) and a Web API (.Net Core 3.1). I'm trying to get the two to communicate over SignalR Core. It works perfectly when both are running locally on my PC (i.e. on localhost). But as soon as I publish my API to Azure App Service (and point the WPF app to the new URL) it doesnt work. SignalR establishes a connection, but when the API sends data to the WPF app, the app never receives it.

I'm not sure if it's related to CORS. CORS on Azure App Service is disabled. On my Web API, I this this Startup.cs:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();

        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins,
                builder => builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()                    
                );
        });

        string connectionString = Configuration.GetConnectionString("eBallDatabase");
        services.AddDbContext<EBallContext>(options =>
                options.UseSqlServer(connectionString));

        var config = new AutoMapper.MapperConfiguration(cfg =>
        {
            cfg.AddProfile(new AutoMapperProfileConfiguration());
        });
        var mapper = config.CreateMapper();
        services.AddSingleton(mapper);

        services.AddSignalR(options =>
        {
            options.EnableDetailedErrors = true;
        });

        services.AddApplicationInsightsTelemetry();
    }

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

        app.UseCors("corsPolicy");
        app.UseHttpsRedirection();
        app.UseRouting();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<ChatHub>("/chatHub");
        });
    }

I think I once read that you cannot have AllowAnyOrigin() with SignalR. You need to specify the desired origins. But I'm not sure what my origin will be as this is a WPF app running on various users computers, all with different domains/IP addresses.

Like I said, it works perfectly when everything is on loclahost. But as soon as the API is on Azure App Service, the two manage to establish a SignalR connection, but that's about it. No data is received by the WPF app from the API.

Any ideas?

Answer 1

Yes you need to specify the origins. And order of the CORS methods also maters. And you need the CORS to comunicate beetween your Framework app and the .NET Core app. So you can try this:

services.AddCors(options =>
{
    options.AddPolicy(CorsPolicy, builder => builder.WithOrigins("https://yourFrameworkApp.azurewebsites.com")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        .SetIsOriginAllowed((host) => true));
});

Also you can see on the client side what error do you have when connecting to the hub. For example, when the client side call the endpoint to your hub to negotiate you can have:

CORS error - try add it like bellow.

404 not found - you are pointing to the wrong controller/hub.

405 method not allowed - this is when the user is not authorized to call methods in your hub.

Also, on your Startup (Configure method) check if you are adding Web Sockets:

app.UseWebSockets();

Edit: you can also try using Azure SignalR so you don't need to worry about this type of problems.