Spring MVC（JSP视图）集成React.js的位置及Maven部署疑问

我来帮你梳理下这两个关于Spring MVC集成React的问题，结合日常开发的实践经验给你解答：

其实位置不是绝对固定的，但有两种主流的摆放方案，各有优劣，你可以根据团队习惯选择：

• 放在项目根目录下：这是最常用的方式——比如你的Spring MVC项目根目录（和src、pom.xml同级）直接新建一个react-app文件夹。好处是前后端代码物理分离，各自的工具链（Maven管后端、npm管前端）互不干扰，在IntelliJ IDEA或WebStorm里，你可以把整个项目打开，也可以单独打开React子目录，非常适合前后端分工开发。
• 放在Spring MVC的webapp目录下：比如src/main/webapp/react-app，这种方式更贴近传统Java Web项目的静态资源结构，但缺点很明显：npm的依赖包（node_modules）会被Maven打包到WAR里，导致包体积臃肿，而且前后端代码混在一起，维护起来不如分离清晰。

总的来说，更推荐第一种根目录分离的方式，只要你自己能清晰管理，位置其实不影响功能。

完全可以！这也是生产环境部署的标准做法，具体步骤大概是这样：

1. 先在React项目里执行npm run build，生成生产环境的静态文件（默认会输出到react-app/build文件夹）。
2. 配置Maven的maven-war-plugin插件，把React build后的静态文件复制到Spring MVC项目的静态资源目录（比如src/main/webapp/static或者直接放到webapp根目录）。举个简单的插件配置示例：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>3.3.2</version>
    <configuration>
        <webResources>
            <resource>
                <!-- React build后的文件夹路径 -->
                <directory>${project.basedir}/react-app/build</directory>
                <!-- 复制到WAR包的根目录 -->
                <targetPath>/</targetPath>
            </resource>
        </webResources>
    </configuration>
</plugin>

3. 执行mvn clean package打包成WAR包，部署到Tomcat、Jetty等Java Web容器即可。

这样打包完成后，前端静态资源和后端代码完全在同一个WAR包里，运行时直接访问后端容器的端口就能加载React页面，不需要单独启动前端服务，自然也不会有跨域问题。

另外补充下你提到的开发阶段运行方式：
用mvn启动后端、npm start启动React是非常常见的开发模式，因为React的热重载能提升开发效率。这时候遇到的跨域问题，有两种简单的解决方式：

• 配置React代理：在React项目的package.json里添加"proxy": "http://localhost:8080"（替换成你的后端服务端口），这样React发起的API请求会自动转发到后端，不需要后端做额外配置，不过这个代理只在开发环境（npm start）生效。
• 后端配置CORS：如果不想用代理，也可以在Spring MVC里添加全局CORS配置，比如通过@CrossOrigin注解给单个接口放行，或者写一个CORS过滤器，允许前端的开发域名（比如http://localhost:3000）访问后端接口。

内容的提问来源于stack exchange，提问作者Дмитрий Каспорский