Host port lost on theme.css behind Nginx

[ArkciaDragone]

Describe the bug

Description

When configuring the app behind Nginx, the theme.css file accessed in the browser does not include the port number. This results in abnormal UI loading.

It seems the bug of missing subpaths has been fixed earlier.

Possible workaround

Following this suggestion, I tried setting proxy_set_header Host $http_host;. Unfortunately, this only enabled version 4.20.1 to work as expected, not versions 4.21.0 or 4.37.2. However, changing both instances of $host to $http_host appeared to resolve the issue, like this:

proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Host $http_host;

I'm not certain if this is the correct fix, but it worked for me. It might be helpful to update the guide with a proper configuration to save others' time. Thank you for your attention!

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

Gradio app

import gradio as gr
import time

def test(x):
    time.sleep(1)
    return x

gr.Interface(test, "textbox", "textbox").queue().launch()

Nginx config

The script is adapted from the guide.

server {
    listen 8080;

    location / {
        proxy_pass http://127.0.0.1:7860;
        proxy_buffering off;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Screenshot

No response

Logs

No response

System Info

- gradio 4.37.2
- nginx 1.26.1

Severity

I can work around it

[Stihotvor]

I was fighting with it to fix and gave up. Right now I'm using pure uvicorn instead.

[abidlabs]

Thanks @ArkciaDragone -- we'll add this to the Guide