Spring Boot 集成 React 前端路由问题

0x00 背景

趁着最近疫情窝在家无所事事，着手为自家的公寓开发了一个简易管理系统，实现了入住登记，缴纳各种费用等一些常用功能。

0x01 问题

打算把React和SpringBoot打成一个Jar包，然后直接丢到Docker上进行部署，映射一个端口出来提供服务。但是发现这样的话SpringBoot会接管前端路由，导致找不到地址的时候SpringBoot直接抛404，前端路由无效。

0x02 解决

我们需要当服务端找不到地址的时候直接抛给前端，即index.html。

新建一个配置类 StaticResourceMap

@Configuration
public class StaticResourceMap implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 映射静态资源根目录到  frontend
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/frontend/")
                .resourceChain(true)
                .addResolver(new PathResourceResolver(){
                    // 后端匹配不到路由时转给前端
                    @Override
                    protected Resource getResource(String resourcePath, Resource location) throws IOException {
                        Resource resource = super.getResource(resourcePath, location);
                        if (resource == null){
                            resource = super.getResource("index.html", location);
                        }
                        return resource;
                    }
                });
    }
}