如何将React与Spring Boot集成，实现Spring Boot提供React的index.html服务

前置操作：先处理React项目的构建配置 #

• 如果你用的是create-react-app创建的React项目，先在项目根目录的package.json里加一行配置："homepage": "."，这样构建出来的静态资源引用路径是相对路径，放到Spring的静态目录里不会出现资源404的问题。
• 执行React项目的构建命令npm run build，执行完成后会在项目根目录生成一个build文件夹，里面就是所有的React静态资源，包含你要的index.html、js、css、图片等文件。

方案A：直接托管静态资源（适用于生产部署、简单开发场景） #

这是最接近你之前熟悉的传统开发模式的方案，前端静态资源完全由Spring Boot托管，访问localhost:8080就会直接返回React的页面：

1. 把刚才React构建出来的build文件夹里的所有文件，全部复制到Spring Boot项目的src/main/resources/static目录下，如果没有static目录就手动新建一个。
2. 如果你的Spring Boot项目没有加自定义的资源拦截规则，现在直接启动Spring Boot服务，访问localhost:8080就能直接看到React的页面，调用Rest接口也不需要跨域配置，因为页面和接口都是同一个8080端口的服务提供的。
3. 如果你加了拦截器或者WebMvc配置，需要在配置类里放开静态资源的访问拦截，示例配置如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 匹配所有静态资源路径，指向static目录下的资源
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }
}

4. 如果你用了Spring Security，还需要在Security配置类里放开静态资源的访问权限，示例片段：

@Configuration
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/**/*.html", "/**/*.js", "/**/*.css", "/**/*.png", "/**/*.svg").permitAll()
                .anyRequest().authenticated()
        );
        // 其余配置按你自己的需求保留
        return http.build();
    }
}

注意：如果你的React项目用了BrowserHistory（也就是不带#的路由模式），直接刷新非根路径的页面会出现404，需要在WebMvc配置类里追加视图控制器配置，把所有匹配不到的路径都转发到index.html：

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/{path:[^\\.]*}")
            .setViewName("forward:/index.html");
}

方案B：开发环境分离调试（无需频繁构建React） #

如果你现在还在开发阶段，不想每次改React代码都执行构建复制到Spring目录，可以用这种方案提升开发效率：

1. 不用动React的启动配置，还是运行在localhost:3000，只需要在React项目里加代理配置，把所有api请求转发到localhost:8080，如果是create-react-app项目，直接在package.json里加一行"proxy": "http://localhost:8080"即可。
2. 给Spring Boot加跨域配置，允许3000端口的请求访问接口，示例配置：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

3. 开发阶段你可以直接访问3000端口调试React代码，调用接口会自动转发到8080的Spring服务，开发完成后再按方案A的步骤打包放到Spring里部署即可。

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