Spring Boot+React项目浏览器刷新返回403错误如何修复？

核心问题定位 #

现有配置的几个错误点：

• 路径不匹配：你示例的前端路由地址是/app/dashboard，但注册的视图控制器路径是/dashboard，缺少/app前缀，自然无法匹配
• 转发逻辑错误：前端路由地址/app/dashboard是给React路由接管用的，不需要转发到/getDashboard接口，该接口是React页面渲染时内部发起AJAX请求调用的，直接转发接口会导致浏览器直接请求未带JWT的接口，返回403
• 正则匹配覆盖：你写的通配路径规则/{x:[\\w\\-]+}优先级高于精确路径配置，会覆盖/dashboard的映射规则

后端修复方案 #

1. 修正视图控制器配置 #

调整路径前缀与转发逻辑，所有前端路由统一转发到index.html交给React处理：

@Configuration
public class WebConfiguration implements WebMvcConfigurer {
    private static final String FORWARD_INDEX = "forward:/index.html";
    
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 根路径映射
        registry.addViewController("/").setViewName(FORWARD_INDEX);
        // 带/app前缀的所有前端路由映射
        registry.addViewController("/app/{x:[\\w\\-]+}").setViewName(FORWARD_INDEX);
        registry.addViewController("/app/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}").setViewName(FORWARD_INDEX);
        // 设置视图控制器优先级高于普通请求映射，避免被接口规则覆盖
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }
}

2. 放行前端路由的鉴权校验 #

403报错本质是JWT拦截器/Spring Security把前端路由路径当成了需要鉴权的接口，需要配置放行所有非接口路径：
如果是Spring Security配置，参考示例：

@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            // 放行静态资源与前端路由
            .antMatchers("/", "/index.html", "/static/**", "/app/**").permitAll()
            // 仅api开头的接口需要鉴权
            .antMatchers("/api/**").authenticated()
            .and()
            .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class);
    }
}

如果是自定义JWT拦截器，在拦截规则里排除/app/**、/static/**等路径即可。

3. 通用前端路由适配方案（更推荐） #

不用逐个配置路由规则，直接写全局Controller适配所有前端路由，更灵活：

@Controller
public class FrontendRouteController {
    // 匹配所有/app开头的页面请求，转发到index.html
    @RequestMapping(value = {"/app/**", "/"}, headers = "Accept=text/html")
    public String forwardIndex() {
        return "forward:/index.html";
    }
}

React侧优化方案 #

1. 改用Hash路由（改造成本最低） #

如果不想调整后端配置，直接将React的路由从BrowserRouter替换为HashRouter，地址栏会自动携带#标识，比如http://localhost:8080/app#/dashboard，刷新时请求的路径始终是/app，不会触发后端路径匹配，直接解决403/404问题。

2. 调整打包路径配置 #

如果项目部署在/app上下文路径下，在package.json中添加配置，避免静态资源加载失败：

{
  "homepage": "/app"
}

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