单页应用（SPA）处理页面刷新问题的最优方案是什么？

SPA前端路由刷新出现404的核心解决思路是配置Fallback路由规则：所有未被后端接口、静态资源规则匹配的请求，全部转发到SPA的入口文件（通常是index.html），由前端路由接管后续的页面渲染逻辑，完全复用用户正常跳转时的渲染逻辑，不会改变浏览器地址栏路径。

如果你的SPA静态资源直接打包放在Spring Boot项目的静态资源目录下，可通过以下两种方式配置：

• 配置视图控制器实现全局转发
  实现WebMvcConfigurer接口添加通用视图规则，设置最低优先级避免覆盖现有接口、静态资源路由：

  @Configuration
  public class SPAWebConfig implements WebMvcConfigurer {
      @Override
      public void addViewControllers(ViewControllerRegistry registry) {
          registry.addViewController("/**")
                  .setViewName("forward:/index.html")
                  .setOrder(Ordered.LOWEST_PRECEDENCE);
      }
  }
  

• 捕获404错误实现转发
  适合已有全局错误处理逻辑的项目，将404响应直接转发到入口文件：

  @Configuration
  public class SPAErrorConfig implements WebServerFactoryCustomizer<ConfigurableServletWebServerFactory> {
      @Override
      public void customize(ConfigurableServletWebServerFactory factory) {
          factory.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
      }
  }
  

如果SPA静态资源由Nginx等反向代理单独托管，修改Nginx的匹配规则即可：

• 核心配置是通过try_files规则优先匹配静态资源，未匹配到则转发到入口文件：

  server {
      listen 80;
      root /your/spa/static/path;
      index index.html;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      # 后端接口统一走反向代理，建议接口统一加/api前缀避免冲突
      location /api/ {
          proxy_pass http://your_backend_service/;
      }
  }
  

• 所有后端接口建议统一添加/api/这类专属前缀，和前端路由做明确区分，避免路由匹配冲突
• 以上方案仅针对History模式的前端路由，哈希模式（URL带#）的路由本身不需要额外配置即可正常刷新
• Fallback路由必须设置为最低优先级，避免覆盖正常的接口、静态资源请求
• 若项目存在多SPA入口，可根据路径前缀配置不同的Fallback规则

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