Rasa chat widget won't connect when server uses SSL

Hi, I implemented the Rasa chat widget on my website that uses an nginx reverse proxy. When I use an SSL certificate to establish the connection, the widget cannot make the connection. It seems the upgrading of the location does not work (without SSL everything works fine).

I see an error like this on the website:

Cannot connect to wss://website-url/socket.io/?EIO=4&transport=websocket&sid=UuZolaKZE2hynROq1234

My nginx location is this:

location /socket.io/ {
            proxy_http_version 1.1;
            proxy_buffering off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";

            proxy_pass http://rasa-production:5005/socket.io;
        }

Could someone please explain the issue and maybe propose what I need to change to fix the it?

Hello, Based on the error message you provided, it seems like the Rasa chat widget is attempting to establish a secure WebSocket (wss) connection on the /socket.io/ path, but it’s failing to do so when using SSL. This could be due to a misconfiguration of the nginx reverse proxy. To resolve this issue, you can try adding the following lines to your nginx configuration within the location block: proxy_set_header Host $host; proxy_ssl_server_name on;

This will set the Host header to the hostname of the server and enable SSL SNI (Server Name Indication) so that the proxy can forward the correct SSL certificate to the client. Your updated nginx configuration would look like this:

location /socket.io/ { proxy_http_version 1.1; proxy_buffering off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection “Upgrade”; proxy_set_header Host $host; proxy_ssl_server_name on; proxy_pass http://rasa-production:5005/socket.io; }

After making these changes, reload the nginx configuration and test the Rasa chat widget again.

When using SSL, you need to make sure that your SSL certificate is valid and the chat widget endpoint URL matches the SSL domain. Additionally, you may need to configure your server to allow cross-origin requests. Check the browser console for any error messages that can help diagnose the issue.

Thanks for the tips so far but I could not resolve the issue yet.

The SSL certificate is valid. I can use https to browse to other parts of my website. CORS should be allowed too:

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";

I also realized that when I browse to other parts of my site and then back to where the widget is (on one page only), the widget starts uttering two of the three initial messages in random order.

Here is the line I see in Firefox when I open the widet first time plus some of the details.

grafik

When I swith back and forth in the website, the widget seems to work but I see lots of GET and POST connections via https like here (they only contain request “3” and responses “2” and “OK”):

Some connections via https to the /socket.io/ location seem to work (with the workaround described above). They contain the payload and Rasa’s response format. Any other ideas what could cause such an erratic behavior?