Nginx API路径404错误：FastAPI+Vue部署问题求助

核心问题点 #

1. 子域名未匹配：当前Nginx配置的server_name仅包含主域名和www子域名，而前端请求的是subdomain.mywebsite.com，该请求不会被当前server块处理，Nginx会调用默认server块响应，导致/api/的代理规则完全不生效，直接返回404。
2. proxy_pass协议与地址错误：后端gunicorn监听的是http://127.0.0.1:8000，但配置里用了https://[mywebsite_ip]:8000/——一方面Nginx尝试用HTTPS协议连接仅支持HTTP的后端，必然失败；另一方面用公网IP访问本地服务，多了一层不必要的网络跳转，还可能触发防火墙限制。
3. Vue单页应用路由隐患（附加）：当前location /的try_files $uri $uri/ =404会导致Vue单页应用刷新页面时返回404，虽不是当前API问题，但建议一并修复。

修正后的Nginx配置 #

server {
    listen 80;
    listen [::]:80;
    # 若前端使用HTTPS，需添加以下SSL配置（替换证书路径）
    # listen 443 ssl;
    # listen [::]:443 ssl;
    # ssl_certificate /path/to/your/ssl/cert.pem;
    # ssl_certificate_key /path/to/your/ssl/key.pem;

    root /var/www/[mywebsite]/html;
    index index.html index.htm;

    # 包含需要处理的子域名
    server_name mywebsite.com www.mywebsite.com subdomain.mywebsite.com;

    # 修复Vue单页应用刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 修正代理规则，直接连接本地后端服务
    location /api/ {
        proxy_pass http://127.0.0.1:8000/;
        # 添加必要代理头，确保后端能正确识别请求来源
        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;
    }
}

验证与重启步骤 #

1. 检查Nginx配置语法：sudo nginx -t
2. 无错误后重启Nginx：sudo systemctl restart nginx
3. 确认后端gunicorn服务状态：sudo systemctl status your-gunicorn-service-name
4. 本地测试子域名API：curl http://subdomain.mywebsite.com/api/（HTTPS请求替换为https）

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