这个问题我碰到过好多次了，本质就是前端路由和Nginx静态资源路由的冲突——SPA的路由是前端JS控制的虚拟路径，Nginx不知道这些路径不是真实的文件/目录，刷新时会去磁盘找对应资源，自然返回404。下面给你一套靠谱的配置方案：

核心配置思路 #

我们需要让Nginx精准区分两类请求：

• /api开头的请求：转发到后端接口服务，保留正常的API交互逻辑
• 其他所有请求：返回SPA的index.html，让前端路由接管页面渲染

完整Nginx配置示例 #

server {
    listen 80;
    server_name mypage.com;

    # 替换成你的SPA打包后的静态文件目录（比如dist/build文件夹）
    root /usr/share/nginx/html;
    index index.html;

    # 处理后端接口请求：转发到你的实际后端服务地址
    location /api {
        proxy_pass http://your-backend-service:8080;
        # 可选：添加必要的请求头，确保后端能正确识别请求来源
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 处理所有非/api的前端路由请求
    location / {
        # 优先加载真实静态资源（css/js/图片等），找不到就返回index.html
        try_files $uri $uri/ /index.html;
    }
}

配置细节解释 #

• root：指定SPA打包后的静态资源根目录，必须确保index.html在这个目录下，Nginx才能找到并返回它。
• location /api：专门匹配/api前缀的请求，直接转发到后端服务，避免被前端路由逻辑拦截。
• try_files $uri $uri/ /index.html：这是解决问题的核心逻辑：
  1. 先尝试加载$uri对应的真实静态文件（比如/css/main.css）
  2. 如果文件不存在，尝试加载$uri/对应的目录
  3. 前两者都失败时，直接返回index.html，让前端路由处理当前路径

额外优化建议 #

如果你的SPA有单独的静态资源前缀（比如/static），可以单独配置location块来优化缓存，提升加载速度：

location /static {
    expires 30d; # 静态资源缓存30天
    add_header Cache-Control "public, immutable";
}

这样配置后，不管用户在/about、/dashboard还是任何前端路由页面刷新，Nginx都会返回index.html，前端路由会自动渲染对应的页面；而/api/user这类后端请求依然能正常转发到后端服务，完美解决你的问题！

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