React front end is not communicating with spring boot REST API. Axios network err in console

Question

Ive been trying to learn to integrate a reactJS frontend with a springboot backend. Ive build a demo CRUD app with a reactJS frontend, and spring boot java backend, following a tutorial. Im very new to react and javascript in general, having more experience with the java side of things, and im having a lot of trouble integrating the two halves together. The react app is inside the file structure of the springboot app. I have my springboot project running on port 8080 and the react app on 8081. I have both sides 'working', but when i try to start the servlet, and then start the react app, both start working but i get no communication between the two when i try to open the page on localhost:8081 and manipulate the UI. Please help a lowly js n00b figure this out, ive been working on it for about a week getting nothing new accomplished. When i start localhost:8081 i see my front page, but if i click anything, it doesnt work, and i see in console an error like this.

localhost:8080/api/tutorials:1 Failed to load resource:.net::ERR_SSL_PROTOCOL_ERROR

with an axios error that looks like

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

this is the tutorial i followed if its helpful.

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

this is the github repo where i have all the code.. https://github.com/SeanRogan/CrudAppDemo/

frontend source code: https://github.com/SeanRogan/CrudAppDemo/tree/master/frontend/src

backend source code: 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

application.properties: 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

if theres any other relevant info i left out please let me know. thanks in advance.

Answer 1

You are using HTTP on the backend side but react app tries to access with HTTPS. Check the http-common.js file.

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

Changing to HTTP should work.