FASTApi搭配nginx部署时跨设备访问CSS样式丢失如何配置？

1. 优先排查前端模板的静态资源引用路径 #

该问题是你当前「本机访问正常、跨设备样式丢失」现象的最常见诱因：

• 检查templates目录下所有HTML模板中CSS资源的引用代码，确认没有写死127.0.0.1、localhost这类本地回环地址，比如错误写法：<link rel="stylesheet" href="http://127.0.0.1/static/css/xxx.css">
• 修正为根路径写法：<link rel="stylesheet" href="/static/css/xxx.css">，如果使用FastAPI配套的Jinja2模板，推荐用官方语法生成路径：{{ url_for('static', path='/css/xxx.css') }}

2. 完善Nginx静态资源配置 #

你当前的静态路径映射逻辑本身符合目录结构（location /static匹配请求后，拼接root路径会定位到C:/robots/poc_app/static/），补充以下配置避免其他潜在问题：

http {
    # 必须加载MIME类型配置，否则CSS会被识别为纯文本，浏览器不会解析为样式
    include       mime.types;
    default_type  application/octet-stream;

    server {
        # 原有服务基础配置
        listen 80;
        server_name 你的服务器公网IP/绑定域名; # 不要填127.0.0.1，否则仅本机可匹配该server规则

        location /static {
            root "C:/robots/poc_app";
            # 补充静态资源缓存规则，可选配置
            expires 7d;
            add_header Cache-Control "public, no-transform";
            # Windows环境注意保证Nginx运行账号对该目录有读取权限，路径不要包含中文
        }

        # 原有FastAPI反向代理配置，确保放在/static规则之后
        location / {
            proxy_pass http://127.0.0.1:你的FastAPI运行端口（默认8000）;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

3. 验证配置生效 #

• 修改完配置后执行nginx -t检查语法是否正确，确认无报错后执行nginx -s reload重载配置
• 清空浏览器缓存后从其他设备访问，打开F12控制台的Network标签排查：静态资源返回404则检查路径映射，返回403则检查目录读取权限，资源加载成功但样式不生效则检查响应头的Content-Type是否为text/css

内容的提问来源于stack exchange，提问作者dmifer