英文:
Spring boot API and React js running on Tomcat
问题
我正在开发一个React JS应用程序，该应用程序从我的Spring Boot API获取所有数据。
在本地一切都运行良好（Spring Boot API在端口4000上，React JS在端口3000上，代理值为“http://localhost/4000”）。
我成功创建了一个war文件，其中包含了我的React JS应用程序和Spring Boot API（在端口8080上运行）。
我将war文件部署到了本地的Tomcat服务器上，并且状态显示为“ok”。
API调用非常成功（例如http://localhost:8080/webfolder/api/categories）。
但是我的React应用程序无法正确地进行API调用（http://localhost:8080/api/categories），正确的URL应该是http://localhost:8080/webfolder/api/categories，如下图所示：
这是我的pom.xml文件的样子：
<groupId>com.fox</groupId>
<artifactId>events-platform</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<!-- 其他内容省略 -->
这是我的package.json文件的开头部分：
{
"name": "events-platform",
"version": "0.1.0",
"private": true,
// 其他内容省略
}
前端中的API调用示例：
axios.get('/webfolder/api/categories')
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
英文:
I'm developing a React JS application that fetches all data from my Spring boot API.
Everything works well locally.(Spring boot API on PORT 4000 and React JS on PORT 3000 with a proxy of value "http://localhost/4000")
I managed to create a war file that includes both my React js app and Spring boot API.(Running on PORT 8080)
I deployed the war file on a local tomcat server with an "ok" status.
Api calls works very well (http://localhost:8080/webfolder/api/categories for instance)
but my React App fails to make api calls correctly (http://localhost:8080/api/categories which it should be http://localhost:8080/webfolder/api/categories) as you can see in the following image:
this is how my pom.xml look like :
<groupId>com.fox</groupId>
<artifactId>events-platform</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>events-platform</name>
<description>Events-platform built using React JS and Spring boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.0.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
<version>2.3.0.RELEASE</version>
</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-starter-data-rest</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
<version>2.3.4.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.0</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.8.RELEASE</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version><!--$NO-MVN-MAN-VER$-->
</dependency>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
</dependency>
<dependency>
<groupId>jakarta.validation</groupId>
<artifactId>jakarta.validation-api</artifactId>
<version>2.0.2</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-agroal</artifactId>
<version>5.4.21.Final</version>
<type>pom</type>
</dependency>
<dependency>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-antrun-plugin</artifactId>
<version>3.0.0</version>
<type>maven-plugin</type>
</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.6</version>
<configuration>
<workingDirectory>${project.basedir}/src/main/webapp/front-end</workingDirectory>
<installDirectory>target</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v14.5.0</nodeVersion>
<npmVersion>6.14.5</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-antrun-plugin</artifactId>
<executions>
<execution>
<phase>generate-resources</phase>
<configuration>
<target>
<copy todir="${project.build.directory}/classes/public">
<fileset dir="${project.basedir}/src/main/webapp/front-end/build"/>
</copy>
</target>
</configuration>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
And this is how the beginning of my package.json look like :
Instance of my API calls in the front-end :
答案1
得分: 0
根据您在测试中展示的内容，您的 API 正在使用 /webfolder 上下文，而您的 ReactJS 客户端则使用根上下文 /。
您可以将客户端更改为使用 /webfolder 上下文，或者配置您的 API 使用根上下文 /。
更新 2020-10-08 - 12:20
在您更新了 Web 客户端的示例代码之后，我建议您将 axios 的调用更改为类似以下的形式：
const API_ROOT = '/webfolder/api';
useEffect(() => {
axios.get(`${API_ROOT}/spaces`).then(...).catch(...)
axios.get(`${API_ROOT}/categories`).then(...).catch(...)
})
英文:
From what you've shown in your tests, your API is using the /webfolder context, while your ReactJS client is using the root context /.
You could change our client to use the /webfolder context, or configure your API to use the root context /.
UPDATE 2020-10-08 - 12:20
After your update with your web client's sample code, I'd suggest you change your axios calls to something like:
const API_ROOT = '/webfolder/api'
useEffect(() => {
axios.get(`${API_ROOT}/spaces`).then(...).catch(...)
axios.get(`${API_ROOT}/categories`).then(...).catch(...)
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论