如果 Spring Boot + React 项目的打包产生 405 错误怎么办？

Question

几天后我完成了一个项目的原型开发，该原型需要进行用户测试，并且在 IDE 中测试时它按预期工作。后端在 Spring Boot 中，内置在 STS4 中，前端是 React，内置在 VS Code 中。

作为该过程的一部分，我正在从这两个部分创建一个“war”包，该包将部署在测试服务器上。一切都按应有的方式编译，文件被部署到 Apache（我正在测试它的地方），问题在那里出现。

具体来说，主页产生404错误：

如果我尝试应用任何前端导航，结果是 405 错误：

但是，如果我尝试访问 Spring Boot API 中的任何端点，我可以这样做：

这是前端导航的布局，因为它可能反映在 URL 中：

因此，问题在于编译后的文件如何导航到前端 React 组件。

上下文，这是项目中的POM文件，它使用Maven前端插件在Spring Boot项目中集成和构建前端组件。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>SQL_CRUD_OPS</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>SQL_CRUD_OPS</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.microsoft.sqlserver</groupId>
            <artifactId>mssql-jdbc</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            
            
            <plugin>
               <groupId>com.github.eirslett</groupId>
               <artifactId>frontend-maven-plugin</artifactId>
               <version>1.12.1</version>
               
               <executions>
                <execution>
                    <id>Install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <nodeVersion>v19.6.1</nodeVersion>
                        <npmVersion>9.4.0</npmVersion>
                    </configuration>
                </execution>
                
                <!-- running npm install -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                
                <!-- build production version -->
                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>run build</arguments>
                    
                    </configuration>
                
                </execution>
               
               </executions>
               <configuration>
                    <nodeVersion>v19.6.1</nodeVersion>
                    <workingDirectory>src/react-routers-bootstrap - Copy</workingDirectory>
               </configuration>
             </plugin>
             
             <!-- copy react build artigact to spring boot -->
             <plugin>
             <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
             <executions>
                <execution>
                    <id>Copy JavaScript app into SpringBoot</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>target/clients/static</outputDirectory>
                        <resources>
                            <resource>
                                <directory>src/react-routers-bootstrap - Copy/build</directory>
                                <filtering>false</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
             </executions>
             
             </plugin>

        </plugins>
    </build>

</project>

我查看了范围广泛的博客、问答和视频，但我没有太多运气来解决这个问题。

两个值得注意的来源是这个和这个。

在尝试解决问题的过程中，我已经使用这些示例重写了 POM 文件大约两次。

打包的主要要求是指定“war”格式，因为我的目标是基于 Web 的应用程序，指定提供 Tomcat 实例，因为它将部署在 Apache 上，以及放置范围这些链接中的插件（有变体），它将构建反应文件并将其放在一个专用文件夹中，据我所知，该文件夹应该由 Spring 检索。

Spring Boot 将从中获取前端组件的默认文件夹，例如 Thymeleaf，位于 resources 文件夹下，您可以将 HTML 文件放在 static 或 templates 文件夹中。

我之前确实在 React 项目上运行过 npm run build，并将其与它的 build 文件夹一起移植到 static 文件夹中。我确实注意到各种示例使用 target 文件夹，其中存储前端的编译版本，所以我通常保留它。

我所做的其他事情是修改 React 项目中的 package.json 文件以包含 "proxy": :localhost:8080 和 "homepage": "/"，但这似乎没有任何效果。该项目已经在 Controller 中的控制器中使用 @CrossOrigin 注释来引用 React 使用的端口 3000，并且 React 前端使用带有 localhost:8080 的 Axios 向 API 发送请求。

我考虑过将已编译的war文件的名称添加到前端导航的路径中，但是用API路径这样做并没有产生结果，我认为这不会有什么不同。在将 war 文件放在服务器上之前重命名它除了 UX 目的之外也没有任何作用。

我遇到的进一步建议是，可以将在 React 构建文件中创建的 js 和 css 文件夹移植到 resources/static 文件夹中，然后 Spring Boot 将自动在其中查找，但这种方法产生了存在于其中的 js/css 文件出现 404 错误。

我想到的最后一个想法是在静态文件夹中创建一个 index.html 文件，它作为 App.js 文件的代理，该文件是基于 React 的应用程序的入口点，但这种方法并没有产生太多效果鉴于以上情况，对我来说很有意义，如果有人以前做过，我将不胜感激。

这样做的一个结果是，下次我这样做时，最好直接在 Spring Boot 项目文件夹中创建 React 项目。

提前谢谢你！