React+Spring Boot全栈应用部署方案咨询：两种方式选哪种？

方案一：React打包到Spring Boot Jar包 #

安全与性能担忧的解答 #

• 安全层面：打包后的React静态文件（HTML/CSS/JS）本身不存在额外安全风险。如果需要控制访问权限，可通过Spring Security对静态资源路径（如/static/**）添加拦截规则，或给后端接口加权限校验，安全性完全可以和分域部署持平。
• 性能层面：默认情况下Spring Boot从类路径加载静态资源，高并发场景下确实不如Nginx这类专门的静态资源服务器高效，但中小流量项目完全够用。可通过以下优化提升性能：
  • 开启Gzip压缩：在application.yml中配置server.compression.enabled=true，减少传输体积
  • 添加缓存头：通过Spring的ResourceHandler配置静态资源的Cache-Control，让浏览器缓存静态文件
  • React用prod模式打包，开启代码压缩、Tree Shaking，减小文件体积

方案优势 #

• 部署极简：仅需维护一个Jar包，不用拆分两个独立服务，适合快速上线或小团队项目
• 从根源避免跨域问题：前后端同域名，无需处理CORS相关配置

方案二：前后端分域部署（解决CORS问题） #

本地开发正常是因为你大概率用了React的proxy配置（package.json中的proxy字段），开发环境会自动转发请求绕过浏览器跨域校验，但生产环境无此代理，所以出现报错。这里提供两种解决方案：

1. Spring Boot后端配置全局CORS #

比给单个接口加@CrossOrigin更易维护：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 仅对后端接口路径生效
                .allowedOrigins("https://your-frontend-domain.com") // 生产环境必须指定具体前端域名，禁止用*
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true); // 需要传递Cookie或认证信息时必须开启
    }
}

注意：生产环境不能同时设置allowedOrigins("*")和allowCredentials(true)，浏览器会直接拒绝这类冲突配置。

2. Nginx反向代理（生产环境首选） #

通过Nginx将前端静态资源和后端接口请求统一到同一个域名下，彻底规避跨域问题，同时优化性能：
示例Nginx配置：

server {
    listen 80;
    server_name your-domain.com;

    # 处理前端静态资源请求
    location / {
        root /path/to/your/react/build;
        try_files $uri $uri/ /index.html; # 支持React路由的History模式
    }

    # 转发后端接口请求到Spring Boot服务
    location /api {
        proxy_pass http://localhost:8080; # Spring Boot服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

方案优势：

• 无需修改后端代码，完全通过Nginx解决跨域
• Nginx可缓存静态资源、做负载均衡，性能优于直接部署前端
• 前后端可独立扩缩容，适合中大型项目

综合选择建议 #

• 小项目、快速验证、团队人力有限：选方案一，部署简单，节省运维成本
• 中大型项目、需独立扩缩容前后端、追求最优性能：选方案二+Nginx反向代理，这是生产环境的标准实践

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