Embedded Chart Not Loading in SQLPage Web UI Behind Nginx Proxy

[dittybijil]

I have a site running at http://localhost:4321, which contains a link called Test Report. Clicking this link should display the content of a web UI hosted at http://localhost:3000. I am using Nginx with a proxy pass configuration to achieve this functionality, so the web UI can be accessed at http://localhost/report/webui/index.sql.

The chart in the web UI is displayed through a card component using an embed link (e.g., /report/chart1.sql?_sqlpage_embed). However, the chart is stuck on "loading" and does not render correctly. Other functionalities of the web UI work fine.

I’ve attached a screenshot showing the issue and the current proxy pass configuration. Could you please advise if there’s any modification needed in the proxy pass settings to resolve this issue?

This is the original view

But now its showing like this

Following is the code used for proxy setting

server {
    listen 80;

    server_name localhost;

    # Proxy to the main site at http://localhost:4321
    location / {
        proxy_pass http://localhost:4321;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # Proxy requests to /report to http://localhost:3000
    location /report/ {
      #  rewrite ^/report/(.*)$ /$1 break;
        proxy_pass http://localhost:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

# Rewrite links in the response to include /report
        sub_filter 'href="/' 'href="/report/';
        sub_filter 'src="/' 'src="/report/';
        sub_filter 'url("/' 'url("/report/';
        sub_filter 'data-embed="/' 'data-embed="/report/';
        sub_filter_once off;
 # Inform backend about the new base path
        proxy_set_header X-Script-Name /report;
        proxy_set_header X-Forwarded-Prefix /report;

        # Disable Accept-Encoding for sub_filter to work
        proxy_set_header Accept-Encoding "identity";
    }
}

[lovasoa]

Hello ! Can you please provide a minimal reproduction allowing us to reproduce your issue locally, without any code that is not relevant to the issue ?

Without more details about what your sql files look like, what errors are in the browser's console, etc. it's hard to tell what is going wrong. But at first glance, the sub_filter rules seem very brittle. Wouldn't you be better served by the site_prefix configuration option ? https://github.com/sqlpage/SQLPage/blob/main/configuration.md

[dittybijil]

Thank you for your support! As you suggested, we were able to resolve the issue by using the site_prefix configuration. Everything is working as expected now.

Modified the the config like this

server {
   listen 80;
   server_name localhost;

   # Proxy to the main site at http://localhost:4321
   location / {
       proxy_pass http://localhost:4321;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
   }

   # Proxy requests to /report and ensure correct path handling

   location /report {
      proxy_pass http://localhost:3000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
   }
}