Nginx部署站点刷新页面报404 Cannot GET /login错误如何修复

这是单页应用（SPA）使用History路由模式的典型故障：

• 首次访问根路径/时，Nginx正常返回打包后的index.html，前端资源加载完成后，跳转/login的动作由浏览器端JS控制，不会向服务端发起对应路径的页面请求，因此功能正常。
• 刷新/login页面时，浏览器直接向Nginx发起/login的GET请求，当前配置的规则是：在dist静态资源目录找不到对应物理文件时，就把请求转发到9900端口的后端服务。后端没有定义/login的GET处理接口，直接返回了404格式的JSON错误。

调整Nginx路由规则，前端路由类请求直接返回index.html交由前端路由接管渲染，不要将这类请求转发给后端。
如果后端接口有统一前缀（比如所有接口路径以/api开头），使用拆分配置最稳妥，修改后的完整配置如下：

server {
  listen 8080 ssl;

  ssl_certificate         /etc/letsencrypt/live/my-site.com/fullchain.pem;
  ssl_certificate_key     /etc/letsencrypt/live/my-site.com/privkey.pem;
  ssl_trusted_certificate /etc/letsencrypt/live/my-site.com/chain.pem;

  error_page 497 301 =307 https://my-site.com:8080$request_uri;

  server_name my-site.com;

  root /home/username/apps/project/client/dist;
  index index.html;

  # 单独代理后端接口请求
  location /api {
     proxy_pass https://127.0.0.1:9900;
     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;
  }

  location / {
    # 静态资源不存在时返回index.html，由前端路由处理路径
    try_files $uri $uri/ /index.html;
    error_page 405 =200 /index.html;
  }
}

如果后端接口暂时没有做统一前缀，无法和前端路由路径拆分，建议先给接口增加统一前缀再按上述配置部署，避免前端路由和后端接口路径冲突。

配置修改完成后，依次执行以下命令验证并重载Nginx让配置生效：

# 验证配置语法正确性
nginx -t
# 重载Nginx配置
nginx -s reload

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