CSS can't load in localhost when using asymetric port mapping with docker and nginx reverse proxy

[flacomalone]

Describe the bug

I've seen already many issues related to the css handling when using nginx as a reverse proxy. Not sure at what extend this is the same issue.

My setup is the following: I have a docker image with a very basic nginx conf for reverse proxying a gradio app that also runs locally inside the docker.

When I launch the docker container to start the nginx server and the gradio app inside mapping local port 443 to 443, it works, although it still shows some errors (image below)

The funny behaviour comes when I map docker with a different port. This means using local port 4208 to container port 443, for handling the https requests. In this moment, the css can't be loaded.

I've tried with several releases of gradio. The result that is shown below belongs to gradio 4.31.0.

I leave here a mocked version of my gradio app, as well as the nginx conf file

I tried to follow your guide in https://www.gradio.app/guides/running-gradio-on-your-web-server-with-nginx as much as possible, as I know little to nothing about nginx.

And just in case you ask, the port mapping in docker comes from a production necessity in a real server, so I can't avoid it.

Thanks in advance

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

This is the mocked version of the gradio code:

import gradio as gr

with gr.Blocks() as demo:
    start_btn = gr.Button(value="Start")
demo.queue()

demo.launch(
    favicon_path=os.path.join(os.path.dirname(os.path.dirname(__file__)), "common/media/favicon.png"),
    server_name="0.0.0.0",
    server_port=5000,
    root_path="/user-authentication-chatbot"
)

This is the separate nginx conf file for that particular page in sites-available:

server {
    listen 443 ssl;
    server_name other.domain.com localhost;

    ssl_certificate     /apps/certs/cert.crt;
    ssl_certificate_key /apps/certs/cert.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

    location /user-authentication-chatbot/ {
        proxy_pass http://127.0.0.1:5000/;
        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 Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.31.0
gradio_client version: 0.16.2

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.111.0
ffmpy: 0.3.2
gradio-client==0.16.2 is not installed.
httpx: 0.27.0
huggingface-hub: 0.23.0
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.8.4
numpy: 1.26.4
orjson: 3.10.3
packaging: 24.0
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.7.1
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.4.4
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.1
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.3.1
httpx: 0.27.0
huggingface-hub: 0.23.0
packaging: 24.0
typing-extensions: 4.11.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[abidlabs]

Can you try changing:

        proxy_set_header Host $host;

to

        proxy_set_header Host $http_host;

in your nginx configuration?

[flacomalone]

Still same behaviour

[abidlabs]

Hi @flacomalone could you see if installing this version of gradio fixes it?

pip install https://gradio-builds.s3.amazonaws.com/3fbf2e8e7059f3bab64b0839ab7a0f9f864f0a66/gradio-4.31.5-py3-none-any.whl

[flacomalone]

I can gladly confirm that it does work now. Many thanks for the fix

[abidlabs]

Great! It’ll be out on pypi soon if it’s not already out

Kudos to @hannahblair for the fix!