"Incompatible Browser" when dashboard in reverse proxy

[sergiopr89]

Hello,

When the dashboard is behind a reverse proxy, a "Incompatible Browser" error message is shown.

Nginx example:

server { 
    listen       81;
    server_name  some.local;
    access_log /tmp/some.log combined;

    location / {
        proxy_set_header X-Forwarded-Host $host:$server_port;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass         http://dashboard.local:8070/team-sprint-tasks;
    }
}

Apache example:

<VirtualHost *:80>
    ServerName some.local
    
    ProxyRequests off
    ProxyPreserveHost on
    
    <Location />
        ProxyPass http://dashboard.local:8070/team-sprint-tasks
        ProxyPassReverse http://dashboard.local:8070/team-sprint-tasks
        Order allow,deny
        Allow from all
    </Location>
</VirtualHost>

This should work as the FAQ (http://www.cyclotron.io/faq.html) says "Can I Host My Dashboard on a Separate Domain?" that a reverse nginx proxy can be configured.

Do you have any ideas how can I set the dashboard behind the front server?

Thank you!

[sergiopr89]

Hello,

I just see that proxypassing the cyclotron root instead the dashboard "team-sprint-tasks" itself works right. So, since the FAQ just says that it can be served in a different host as a reverse proxy, I think there's no issue here... 😔

Thank you!

[sergiopr89]

Well, looks like it was too early to claiming victory... I see, when I go to a dashboard that there's a single request to the API with the backend hostname hardcoded in URL instead using the HOST request header one (even with "ProxyPreserveHost on" enabled).

[baumandm]

Hi @sergiopr89, thanks for bringing this to our attention. I think the FAQ is correct in that this functionality isn't available out-of-the-box, but the suggested workaround it gives seems to be wrong or too simplistic in this case.

The issue is that Cyclotron is primarily an Angular web application, and the dashboard routing is done client-side in the browser. So the http://dashboard.local:8070/team-sprint-tasks URL doesn't actually exist in cyclotron-svc at all. The Incompatible Browser message appears only because it's unable to load the main JavaScript files which hide it.

Due to this routing issue, I can't think of a way to achieve what you're doing without some additional changes. Potentially, Nginx could proxypass the Cyclotron root, but add a query parameter or header specifying which dashboard to load. Then when Cyclotron starts up it could check that and load the dashboard if set. This might make it seamless to load a single dashboard directly. I will look into this further to see if it's possible.

Regarding the last comment—I think this is just a config issue. The website makes API requests using the /js/conf/configService.js file, which hardcodes the backend API you want to use. You can set that directly to the proxy server instead of the backend server, http://some.local:81/. That config is used by the user's browser, so it needs to be a publicly-available URL.

[sergiopr89]

Hello @baumandm,

Thank you for your help, the API communication error was the config issue as you said, so I just set the API through the front server and it works!

Thank you!