Angular2+Spring Boot：无法解决上下文路径问题 |前端没有数据

Posted 2023-02-27

【中文标题】Angular2+Spring Boot：无法解决上下文路径问题 |前端没有数据

【英文标题】：Angular2+Spring Boot : Unable to resolve context path issue | No data on frontend

【发布时间】：2018-07-01 20:13:26

【问题描述】：

我创建了一个Angular2+SpringBoot Web 应用程序，我试图将它部署在一台服务器上Tomcat我能够成功运行。

但是，我无法理解生成的上下文路径或请求将如何从 UI 流向后端 Rest service 并填充数据。

我在 UI 上有几个下拉菜单，我通过服务调用填充但未获取数据。

看看form component：显示两个下拉调用

   getBrands() 
    this.http.get('/brands')
      .map(res => res.json())
      .subscribe(
        data =>  this.brandsArray = data;
                  this.brand = this.defaultStringValue;
        ,
        err => console.error(err),
        () => console.log('All brands fetched.'));
  
  getNetworks() 
    this.http.get('/mylab/networks')
      .map(res => res.json())
      .subscribe(
        data =>  this.networksArray = data;
                  this.network = this.defaultStringValue;
        ,
        err => console.error(err),
        () => console.log('All networks fetched.'));
  

proxy.json 是这样的：

"/mylab" :
"target" : "http://localhost:8081",
"secure" : false

这里是后端服务：

 @RestController
 public class DropDownController 

   @Autowired
   DropDownService dropdownService;


/**
 * Returns list of brands to populate dropdown
 * @return
 */
@RequestMapping(value = "/brands", method = RequestMethod.GET)
public List<String> getBrands()
    return dropdownService.getBrands();


/**
 * Returns list of networks to populate dropdown
 * @return
 */
@RequestMapping(value = "/networks", method = RequestMethod.GET)
public List<String> getPlatform()
    return dropdownService.getNetworks();

浏览器控制台输出显示以下错误：

GET http://localhost:8081/brands    404 Not Found     2ms
GET http://localhost:8081/mylab/networks  404 Not Found  1ms 

这清楚地表明两条路径都没有解决。

另外，pom.xml 显示构建信息：

<build>
        <finalName>MyLab</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-failsafe-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>integration-test</goal>
                            <goal>verify</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.0</version>
                <configuration>
                    <workingDirectory>$angular.project.location</workingDirectory>
                    <installDirectory>$angular.project.nodeinstallation</installDirectory>
                </configuration>
                <executions>
                    <!-- It will install nodejs and npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v9.2.0</nodeVersion>
                            <npmVersion>5.6.0</npmVersion>
                        </configuration>
                    </execution>

                    <!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <!-- It will execute command "npm build" inside "/e2e-angular2" directory 
                        to clean and create "/dist" directory -->
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Plugin to copy the content of /angular/dist/ directory to output 
            directory (ie/ /target/transactionManager-1.0/) -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>default-copy-resources</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <overwrite>true</overwrite>
                            <outputDirectory>$project.basedir/src/main/webapp/</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>$project.basedir/$angular.project.location/dist</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

        </plugins>
    </build>

不知道如何解决。

【问题讨论】：

你能分享你的rest控制器声明的注释部分，以及你的springboot项目的上下文配置部分吗？

更新了后端服务代码。没有上下文配置。

您检查过server.contextPath 的值吗？这可以给你一个提示 spring 暴露 API 的地方

【参考方案1】：

打开您的application.properties 文件并添加以下两行。

port: 8081
server.contextPath=/mylab

那就试试下面的网址

http://localhost:8081/mylab/networks

如果您的应用程序没有其他错误并且被盯着看，上面的 URL 应该可以工作。

【讨论】：

也这样做了。没有工作。现在的错误是GET http://localhost:8081/mylab/brands 404 Not Found

如果不行，你一定是语法配置了上下文路径。或者您可能有单独的 tomcat 安装，它在端口 8081 中运行。默认情况下，嵌入式 tomcat 服务器在端口 8080 中运行。您可以在应用程序启动时共享您的配置类和写入控制台的日志吗？。

【参考方案2】：

您应该在 application.yml 或属性文件中声明以下内容：

server:
 host: 0.0.0.0
 port: your port
 contextPath: /your-service

我没有看到您的控制器类中定义的 mylab 路径。 看起来这是缺少的。

【讨论】：

我们在哪里指定这个application.yml 文件？我只有application.properties。

文件应该在资源文件夹下。您可以将内容添加到属性文件（而不是创建 yml 文件），只需确保使用正确的格式