javascript - React 前端未与 Spring Boot REST API 通信。控制台 axios 网络错误

Question

我一直在尝试学习将reactJS前端与springboot后端集成。我已经按照教程构建了一个带有 ReactJS 前端和 Spring Boot Java 后端的演示 CRUD 应用程序。一般来说，我对 React 和 JavaScript 很陌生，对 Java 方面有更多的经验，并且在将这两部分集成在一起时遇到了很多麻烦。 React 应用程序位于 springboot 应用程序的文件结构内。我的 springboot 项目在端口 8080 上运行，react 应用程序在 8081 上运行。我双方都在“工作”，但是当我尝试启动 servlet，然后启动 React 应用程序时，两者都开始工作，但我之间没有任何通信当我尝试在 localhost:8081 上打开页面并操作 UI 时，有两个。请帮助一个低级的 js n00b 解决这个问题，我已经为此工作了大约一周，但没有取得任何新成果。当我启动 localhost:8081 时，我看到我的首页，但是如果我单击任何内容，它就不起作用，并且我在控制台中看到这样的错误。

localhost:8080/api/tutorials:1 无法加载资源:net::ERR_SSL_PROTOCOL_ERROR

有一个 axios 错误，看起来像

AxiosError
code: "ERR_NETWORK"
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message: "Network Error"
name: "AxiosError"
request: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}
response: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}
[[Prototype]]: Error

如果有帮助的话，这是我遵循的教程。

https://www.bezkoder.com/react-spring-boot-crud/#Create_038_Setup_Spring_Boot_project

这是我拥有所有代码的 github 存储库。 https://github.com/SeanRogan/CrudAppDemo/

前端源代码:https://github.com/SeanRogan/CrudAppDemo/tree/master/frontend/src

后台源码: https://github.com/SeanRogan/CrudAppDemo/tree/master/src/main/java/com/seanrogandev/crudapp/demo

pom.xml: https://github.com/SeanRogan/CrudAppDemo/blob/master/pom.xml

应用程序属性: https://github.com/SeanRogan/CrudAppDemo/blob/master/src/main/resources/application.properties

manifest.json: https://github.com/SeanRogan/CrudAppDemo/blob/master/frontend/public/manifest.json

package.json: https://github.com/SeanRogan/CrudAppDemo/blob/master/frontend/package.json

如果我遗漏了任何其他相关信息，请告诉我。提前致谢。

Answer 1

您在后端使用 HTTP，但 React 应用程序尝试使用 HTTPS 访问。检查 http-common.js 文件。

baseURL: "https://localhost:8080/api",

更改为 HTTP 应该可以。