Error occurred while trying to proxy request while running on Docker - node.js

Question

I am trying to deploy my React + Spring Boot app to docker. However, the api from backend seems not connected with my React app although I have already check the port 8080 of the Spring Boot server and check the proxy.js in the React app. It keeps performing "Error occurred while trying to proxy request" error. Please help me answer this!
Here's the proxy.js
export default {
dev: {
'/api/': {
target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {
'^': '',
},
},
}
}
This is the dockerfile of the React App
FROM node:12
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 8000
ENTRYPOINT npm run dev
The Backend Dockerfile
FROM openjdk:8-jdk-alpine
EXPOSE 8080
RUN addgroup -S spring && adduser -S spring -G spring
USER spring:spring
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
And the docker-compose.yml file
version: "3"
services:
server:
build:
context: ./service
dockerfile: ./Dockerfile
ports:
- "8080:8080"
image: academy-server
client:
build:
context: ./web
dockerfile: ./Dockerfile
ports:
- "8000:8000"
image: academy-client
links:
- "server"

Answer 1

Running in Docker is the same as if you were running your front end and backend in two different machines. As such, you cannot use localhost to talk to your backend. Instead you need to use the service names as defined in your docker-compose. So in your case you should use 'server' instead of localhost.
Docker-compose automatically creates an internal network, attaches both of your containers to that network and uses the service names for routing between the containers