Blazor Server cannot interact with components - asp.net

Question

I've made a simple app in Blazor Server, and it works fine for the most part except for when I attempt to run it on my VPS with HTTPS. When I run the app no errors appear, and the websocket appears to connect successfully (viewed from the Firefox console), and yet I cannot interact with any of the components on the website. The websocket doesn't send over any anything when attempting to interact with the components either, but it keeps heartbeating.
I've made a brand new Blazor Server project and followed the following guide: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server, but to no avail.
The VPS runs on Ubuntu 22.04.1 LTS, Apache2 as the webserver (attemped using nginx, didn't help), and Cloudflare as the CA.
The certificate and key are correct and not outdated.
I'm running this virtual host (taken from the link above, and additionally from https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-apache?view=aspnetcore-6.0 (tried just using the configuration from the first link, didn't work)).
<VirtualHost *:*>
RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}
</VirtualHost>
<VirtualHost *:443>
ServerName <serverName>
Protocols h2 http/1.1
ProxyRequests On
ProxyPreserveHost On
ProxyPassMatch ^/_blazor/(.*) http://localhost:5000/_blazor/$1
ProxyPass /_blazor ws://localhost:5000/_blazor
ProxyPass / http://localhost:5000/
ProxyPassReverse / http://localhost:5000/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
SSLEngine on
SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1
SSLHonorCipherOrder off
SSLCompression off
SSLSessionTickets on
SSLUseStapling off
SSLCertificateFile /home/cf.pem
SSLCertificateKeyFile /home/cf.key
SSLCipherSuite ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:>
</VirtualHost>
This is how the Blazor Server main looks like (the snippet that's commented out I've tried, didn't help):
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
//builder.WebHost.ConfigureKestrel(options =>
//{
// options.ConfigureHttpsDefaults(options =>
// {
// var pem = File.ReadAllText(builder.Configuration["PemPath"]).Trim();
// var key = File.ReadAllText(builder.Configuration["KeyPath"]).Trim();
// var crt = X509Certificate2.CreateFromPem(pem, key);
// options.ServerCertificate = crt;
// });
//});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
}
app.UseForwardedHeaders(new() { ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto });
app.UseAuthentication();
app.UseHsts();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
}
To confirm: I'm able to access the website via HTTPS, the HTTPS connection is successful, no Razor component I interact with does anything.
Any help or tips on how to proceed would be greatly appreciated, thank you!

Answer 1

I've solved the issue.
If anyone else comes by this having a similar issue, check with your CA (Cloudflare in my case) a setting called "auto-minify" (or similar) which minimizes your HTML, CSS, and Java.
The article that helped me solve my issue: https://zimmergren.net/solved-asp-net-core-blazor-web-sites-does-not-work-with-cloudflare-html-minification/