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.
