Nginx代理Vue+FastAPI应用时后端API无响应如何调整配置？

• 端口映射完全反向：你的前端服务绑定8000端口、后端服务绑定8080端口，但现有配置中对应后端请求的/api/路径转发到了8000，对应前端请求的根路径/转发到了8080，端口对应错误直接导致API无响应。
• 后端路径匹配规则错误：现有/api/配置的proxy_pass末尾没有斜杠，会将/api/前缀直接传递给后端服务，若你的FastAPI接口没有统一添加/api前缀，会直接返回404错误。
• 冗余配置冲突：配置中声明了root vis/dist静态资源路径，但根路径直接做了反向代理，该静态资源配置不会生效，属于冗余内容。

server {
  listen      80;
  server_name example.com;
  charset utf-8;
  # 若采用前端静态文件直接部署方式可保留以下两行，删除根路径的反向代理配置即可
  # root    vis/dist;
  # index   index.html index.htm;

  location /api/ {
    # 末尾斜杠作用：请求example.com/api/xxx时，自动去掉/api前缀转发到后端为/xxx
    proxy_pass http://127.0.0.1:8080/;
    proxy_set_header    Host                $host;
    proxy_set_header    X-Real-IP           $remote_addr;
    proxy_set_header    X-Forwarded-Host    $host;
    proxy_set_header    X-Forwarded-Server  $host;
    proxy_set_header    X-Forwarded-Proto   $scheme;
    proxy_set_header    X-Forwarded-For     $remote_addr;
    proxy_redirect off;
    proxy_connect_timeout 90s;
    proxy_read_timeout 90s;
    proxy_send_timeout 90s;
  }

  location  / {
    proxy_pass  http://localhost:8000;
    proxy_set_header    Host                $host;
    proxy_set_header    X-Real-IP           $remote_addr;
    proxy_set_header    X-Forwarded-Host    $host;
    proxy_set_header    X-Forwarded-Server  $host;
    proxy_set_header    X-Forwarded-Proto   $scheme;
    proxy_set_header    X-Forwarded-For     $remote_addr;
    proxy_redirect off;
    proxy_connect_timeout 90s;
    proxy_read_timeout 90s;
    proxy_send_timeout 90s;
  }

  error_log  /var/log/nginx/vue-app-error.log;
  access_log /var/log/nginx/vue-app-access.log;
}

1. 配置修改完成后执行nginx -t验证语法合法性，无报错后执行nginx -s reload重载配置即可生效。
2. 若FastAPI接口本身已统一配置/api前缀，可删除proxy_pass http://127.0.0.1:8080/末尾的斜杠，保留/api前缀传递。
3. 若仍有异常可查看/var/log/nginx/vue-app-error.log日志定位具体错误。

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