React web socket not working when using Yarp resource on HTTPS profile

Kralizek commented 5 months ago

I have a AppHost that uses the Yarp resource, a React application for the frontend and some backend applications. If I use the HTTPS profile, the changes are not reflected automatically in the browser. Everything works fine when working with the HTTP profile.

Here is a screenshot of the resource view of my repro

Here is my AppHost Program.cs

using Aspirant.Hosting;

var builder = DistributedApplication.CreateBuilder(args);

var web = builder.AddNpmApp("web", "../../web")
    .WithHttpEndpoint(env: "PORT")
    .RunWithEnvironment("BROWSER", "none");

var isHttps = builder.Configuration["DOTNET_LAUNCH_PROFILE"] == "https";

builder.AddYarp("ingress")
    .WithEndpoint(scheme: isHttps ? "https": "http", port: 11400)
    .WithReference(web)
    .LoadFromConfiguration("ReverseProxy");

builder.Build().Run();

And appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning",
      "Aspire.Hosting.Dcp": "Warning"
    }
  },
  "ReverseProxy": {
    "Routes": {
      "web": {
        "ClusterId": "web",
        "Order": 1,
        "Match": {
          "Path": "{**catchall}"
        }
      }
    },
    "Clusters": {
      "web": {
        "Destinations": {
          "web": {
            "Address": "http://web"
          }
        }
      }
    }
  }
}

PS: I'm perfectly fine working on the HTTP profile. I'm reporting this because it could have effects somewhere else.

DamianEdwards commented 5 months ago

Node.js doesn't honor the hosts OS's certificate trust settings as it embeds its own copy of OpenSSL so you have to configure the client HTTP stack in your Node.js apps to either trust the ASP.NET Core developer certificate or disable cert verification.

See examples from the samples repo:

Kralizek commented 5 months ago

Oh nice! Thanks!

The weird thing is that the web socket from the first screenshot uses a port that is not listed anywhere.

aspirant-project / aspirant

React web socket not working when using Yarp resource on HTTPS profile #16