App only working on safari (behind nginx reverse proxy)

Hello,

The user I’m supporting for our University has built a Streamlit app (1.36.0). It was only accessible through typing the IP address in the browser. After reading of similar issues on this forum I modified the configuration of the NginX reverse proxy. Adding the location descriptors for the root location and for _stcore/stream was enough to get things going for him and I, both using Safari on Mac OS.

The issue is that using Chrome, Firefox and Edge, the dreaded “please wait” persists. I checked the error logs in /var/log/nginx/ and saw errors fetching data from the endpoints _stcore/health and _stcore/host-config. So I added those locations, and these errors don’t show up anymore in the nginx logs. But the situation didn’t change: Safari is the only browser that I know of that will use the websocket correctly.

I can’t find a trace of this specific issue anywhere else. Did any of you experience this?
This is the current NginX configuration. I left the URL in there so you can also test for yourself in case it makes it easier to troubleshoot this.

location /demo/swiss-adt/ {
        limit_conn perip 10;
        limit_conn perurl 100;
        client_max_body_size 25M;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
        proxy_pass http://172.23.63.135:8501/;
    }

    location /demo/swiss-adt/_stcore/stream/ {
        limit_conn perip 10;
        limit_conn perurl 100;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
        proxy_pass http://172.23.63.135:8501/_stcore/stream/;
    }

    location /demo/swiss-adt/_stcore/health/ {
        limit_conn perip 10;
        limit_conn perurl 100;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
        proxy_pass http://172.23.63.135:8501/_stcore/health/;
    }

    location /demo/swiss-adt/_stcore/host-config/ {
        limit_conn perip 10;
        limit_conn perurl 100;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
        proxy_pass http://172.23.63.135:8501/_stcore/host-config/;

When the user tries to open the URL with Chrome, the following error appears in his browser’s analytic tools:

main.7994a814.js:2 WebSocket connection to 'wss://pub.cl.uzh.ch/demo/swiss-adt/_stcore/stream' failed: 
connectToWebSocket @ main.7994a814.js:2
main.7994a814.js:2 WebsocketConnection WebSocket onerror

For the life of me I wouldn’t know why the WebSocket Secure would only work on Safari. Here’s all the details I can extract detail from the network tab of Chrome for a failed request:

# Request on 2024-07-23T11:28:09.029Z

General:
Request URL: wss://pub.cl.uzh.ch/demo/swiss-adt/_stcore/streamHTTP Version: HTTP/1.1Request method: GET
[Headers](https://www.google.com/url?q=http://en.wikipedia.org/wiki/List_of_HTTP_header_fields):

* Accept-Encoding gzip, deflate, br, zstd
* Accept-Language de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,fr;q=0.6
* Cache-Control no-cache
* Connection Upgrade
* Host pub.cl.uzh.ch
* Origin https://pub.cl.uzh.ch
* Pragma no-cache
* Sec-WebSocket-Extensions permessage-deflate; client_max_window_bits
* Sec-WebSocket-Key ZbBOLOw6GtpMvQGrRo1WDw==
* Sec-WebSocket-Protocol streamlit, PLACEHOLDER_AUTH_TOKEN
* Sec-WebSocket-Version 13
* Upgrade websocket
* User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Query arguments:

No Get parameters.

Size:
Headers: **(computed)** 649 bytesBody: 0 bytesTotal: **(computed)** 649 bytes

I thought maybe it’s the way sec-websocket-key is used on Chrome, Mozilla and Edge in a different way than it is used on Safari but I wouldn’t know how to correct this - this could be completely wrong tho. Any ideas?

Update:
The application data is not accessible via URL anymore through Safari either. I also opened the following endpoints:
/_stcore/stream - response is: Can “Upgrade” only to “WebSocket”.
/_stcore/host-config - response is {"allowedOrigins": ["https://devel.streamlit.test", "https://*.streamlit.apptest", "https://*.streamlitapp.test", "https://*.streamlitapp.com", "https://share.streamlit.io", "https://share-demo.streamlit.io", "https://share-head.streamlit.io", "https://share-staging.streamlit.io", "https://*.demo.streamlit.run", "https://*.head.streamlit.run", "https://*.staging.streamlit.run", "https://*.streamlit.run", "https://*.demo.streamlit.app", "https://*.head.streamlit.app", "https://*.staging.streamlit.app", "https://*.streamlit.app"], "useExternalAuthToken": false, "enableCustomParentMessages": false, "enforceDownloadInNewTab": false}
/_stcore/health - response is: “OK”

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.