Axios throws net::ERR_EMPTY_RESPONSE error when call API method

I got net::ERR_EMPTY_RESPONSE whenever API get called. It is a XHR request error

I used to run my node backend locally and it works fine. Now, I try to containerize it via docker. There are two containers: front and backend. I have no problem with my react frontend. Only node backend has the aforemention issue.

Here is my API post request function:

const signInCurrentUser = async (username, password) => {
    try {
        const response = await axiosInstance.post("/users/signin", {
            username,
            password,
        });

        console.log("Signed-in user: ", response);
        return response;
    } catch (error) {
        console.log("error: ", error);
        // Check if the error has a response object
        if (error.response) {
            if (error.response.status === 400) {
                throw new Error("Invalid username or password");
            } else {
                throw new Error(
                    `Sign-in failed with status code ${error.response.status}`
                );
            }
        } else if (error.request) {
            // The request was made but no response was received
            throw new Error("No response received from the server");
        } else {
            // Something happened in setting up the request
            throw new Error(`Error in request setup: ${error.message}`);
        }
    }
};

It throws the error object from error.request and error.response is undefined since it is empty. So, I assume it might be some error with some instructions in dockerfile? or need more configuration? (please guide me)

Belows are dockerfiles lies in my front/backend:

# Build the express app
FROM node:20 AS build

# Set the working directory inside the container
WORKDIR /booking-express

# Copy package.json and package-lock.json (or yarn.lock)
COPY package*.json ./

# Install dependencies (including development dependencies)
RUN npm install

# Copy the rest of the application code
COPY . .

# Production
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /booking-express

# Copy only the necessary files from the build stage
COPY --from=build /booking-express /booking-express

# Install only production dependencies
RUN npm install

# Expose the port the app runs on
EXPOSE 4000

# Define the command to run the application
CMD ["node", "./api/index.js"]

# Build the React app
FROM node:20 AS build

# Set the working directory inside the container
WORKDIR /booking-react

# Copy the package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application files
COPY . .

# Build the app
RUN npm run build

# Serve the built files with Nginx
FROM nginx:alpine

# Copy the build files to the Nginx directory
COPY --from=build /booking-react/build /usr/share/nginx/html

# Expose port 80    
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

I use docker build to build from the instructions. To run containers I just use command: docker run -p 4000:4000 --env-file .env booking-express and docker run -p 80:80 --env-file .env booking-react without docker-compose.yaml because I’m really new to docker. The env is also included in container as I checked with docker -it I have MySQL as a database and it seems to have a problem connection to it during API request.

I’d like to check some log in the backend, but the only thing it shows is payload (I also have no clue why I see it. It shows in backend when I run backend container) because it seems like the connection is refused by server or something. I can see log in container:

Server is running on port 4000
username:  test-user
{
  user_id: 1,
  password: 'hashed pw'
}

It displays username: test-user before the code would used to typically execute pool.query() (to connect to MySQL DB). I just want to know why there is no response coming back.