Components don't work after switching to SSL

After switching my debian server to ssl, components like buttons, checkboxes stop working. Nothing happens, when clicked. Login and page navigation still works. Using Https in Development works, but it is a windows machine.

My appsettings look like this:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "ArbeitsscheinDBConnection": "Data Source=./wwwroot/Arbeitsschein.db;Default Timeout=30"
  },
  "Databases": {
    "ArbeitsscheinDB": {
      "NoPluralize": false,
      "UseDatabaseNames": false
    }
  },
    "Kestrel": {
        "EndPoints": {
            "Https": {
                "Url": "https://localhost:5000",
                "Certificate": {
                    "Path": "****",
                    "KeyPath": "****"
                }
            }
        }
    }
}

Is this where I did something wrong, or do I have to add anything to

if (!app.Environment.IsDevelopment())

in my program.cs?

There is probably some exception thrown (either .NET or JavaScript). You should check your browser's developer tools as a start. Then check your .NET application logs.

Thanks for the hint. There are several error messages in the Developer Console. I just can't figure out, what the problem is. Port 443 is open through ufw and the page is accessible, only the Components are not:

Error: Failed to start the transport 'WebSockets': Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.
log @ blazor.web.js:1
_createTransport @ blazor.web.js:1
await in _createTransport (asynchron)
_startInternal @ blazor.web.js:1
await in _startInternal (asynchron)
start @ blazor.web.js:1
_startInternal @ blazor.web.js:1
_startWithStateTransitions @ blazor.web.js:1
start @ blazor.web.js:1
startConnection @ blazor.web.js:1
startCore @ blazor.web.js:1
start @ blazor.web.js:1
nr @ blazor.web.js:1
await in nr (asynchron)
tr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonym) @ blazor.web.js:1
setTimeout (asynchron)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ji @ blazor.web.js:1
blazor.web.js:1 
        
        
        GET https://***/_blazor?id=zMjEk39R-S-cES74n5fQzw&_=1715605470317 502 (Proxy Error)
send @ blazor.web.js:1
send @ blazor.web.js:1
send @ blazor.web.js:1
get @ blazor.web.js:1
connect @ blazor.web.js:1
_startTransport @ blazor.web.js:1
_createTransport @ blazor.web.js:1
await in _createTransport (asynchron)
_startInternal @ blazor.web.js:1
await in _startInternal (asynchron)
start @ blazor.web.js:1
_startInternal @ blazor.web.js:1
_startWithStateTransitions @ blazor.web.js:1
start @ blazor.web.js:1
startConnection @ blazor.web.js:1
startCore @ blazor.web.js:1
start @ blazor.web.js:1
nr @ blazor.web.js:1
await in nr (asynchron)
tr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonym) @ blazor.web.js:1
setTimeout (asynchron)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ji @ blazor.web.js:1
blazor.web.js:1  [2024-05-13T13:04:30.401Z] Error: Failed to start the transport 'LongPolling': Error: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>502 Proxy Error</title>
</head><body>
<h1>Proxy Error</h1>
<p>The proxy server received an invalid
response from an upstream server.<br />
The proxy server could not handle the request<p>Reason: <strong>Error reading from remote server</strong></p></p>
<hr>
<address>Apache/2.4.59 (Debian) Server at *** Port 443</address>
</body></html>
: Status code '502'
log @ blazor.web.js:1
_createTransport @ blazor.web.js:1
await in _createTransport (asynchron)
_startInternal @ blazor.web.js:1
await in _startInternal (asynchron)
start @ blazor.web.js:1
_startInternal @ blazor.web.js:1
_startWithStateTransitions @ blazor.web.js:1
start @ blazor.web.js:1
startConnection @ blazor.web.js:1
startCore @ blazor.web.js:1
start @ blazor.web.js:1
nr @ blazor.web.js:1
await in nr (asynchron)
tr @ blazor.web.js:1
startCircutIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonym) @ blazor.web.js:1
setTimeout (asynchron)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ji @ blazor.web.js:1
blazor.web.js:1  [2024-05-13T13:04:30.402Z] Error: Failed to start the connection: Error: Unable to connect to the server with any of the available transports. Error: WebSockets failed: Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled. ServerSentEvents failed: Error: 'ServerSentEvents' does not support Binary. Error: LongPolling failed: Error: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>502 Proxy Error</title>
</head><body>
<h1>Proxy Error</h1>
<p>The proxy server received an invalid
response from an upstream server.<br />
The proxy server could not handle the request<p>Reason: <strong>Error reading from remote server</strong></p></p>
<hr>
<address>Apache/2.4.59 (Debian) Server at *** Port 443</address>
</body></html>
: Status code '502'

I think all Blazor components won't work (not just Radzen.Blazor). You seem to have some configuration issue which prevents the Blazor WebSocket to connect to your server. Not sure what this might be though.

By the way if you are deploying behind some reverse proxy you can check the official Microsoft documentation: Host ASP.NET Core on Linux with Nginx | Microsoft Learn

You may need to add header forwarding too:

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});
1 Like