Web container cannot call backend container from docker compose

Question

I am still finding my feet in the docker world. I am trying to dockerize my small pet project. The frontend is a vue-cli app which communicates with backend containing restful APIs made by spring boot.

So my approach was to declare two separate dockerfile for backend and frontend and combine them via one docker compose file. So the folder structure is -

backend/
       - Dockerfile
frontend/
       - Dockerfile
docker-compose.yml

As frontend needs to be able to call backend services, I created a bridge network and shared the network between them. This is my docker compose file -

version: "2"
services:
  backend:
    build: backend/.
    networks:
      - movie-network
    ports:
      - "8098:8098"
  frontend:
    build: frontend/.
    ports:
      - "8812:8080"
    networks:
      - movie-network

networks:
  movie-network:
    driver: bridge

I have an endpoint exposed at backend called /api/findAll. Now if the frontend service calls the API via http://localhost:8098:/api/findAll (host network), I can view it from my browser (http://localhost:8812), everything works fine.

But If frontend calls the same API using backend:8098/api/findAll; utilizing bridge network - it gives error in my browser -

If I do a docker exec in the frontend and ping backend, the ping is successful

So, why is it giving error in my browser (http://localhost:8812)? Am I conceptually doing anything wrong? Seeking suggestions.

Frontend Dockerfile -

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080

Backend Dockerfile -

FROM openjdk:11-jre-slim
# Creating app directory
WORKDIR /usr/src/movies
# Copying Jar (didn't use FROM maven to save some time)
COPY target/movies*.jar movies.jar

RUN pwd

RUN ls -la
# Exposing Port
EXPOSE 8098
# Running App
ENTRYPOINT ["java","-jar","/usr/src/movies/movies.jar"]

David Maze · Accepted Answer · 2020-04-02 11:08:40Z

The important thing for this setup is that your actual front-end code is not running in Docker, it's running in your browser. That means it has no idea about Docker networking, containers, or anything else; the URL you give it has to be one that reaches a published port on your host. That's why localhost works here (if the browser and containers are running on the same host) but backend doesn't.

A typical approach to this is to set up some sort of reverse proxy that can both host the front-end application code and proxy to the back-end application. (For example, set up Nginx where its /api route proxy_pass http://backend:8098, and its / route either try_files a prebuilt Javascript application or proxy_pass http://frontend:8080.)

If you do this, then e.g. http://localhost:8900 is the front-end and http://localhost:8900/api is the back-end, from the browser's point of view. This avoids the CORS issues @coedycode hints at in their answer; but it also means that the front-end code can use a relative URL /api (with no host name) and dodge this whole problem.

+-------------+                  | Docker >           /     +----------+
+-------------+                  |                 /------> | frontend |
|             |  localhost:8900  |    +-------+    |        +----------+
|   Browser   | ---------------> | -> | nginx | -> +
|             |                  |    +-------+    | /api   +----------+
|             |                  |                 \------> | backend  |
+-------------+                  |                          +----------+

coedycode · Accepted Answer · 2020-04-02 09:43:07Z

2

It's not really a docker configuration problem, it's a CORS issue. When the browser makes an HTTP request from http://localhost to http://backend that's a Cross Origin Request, and the backend isn't allowing it. The ping to backend works because pings are not affected by CORS.

In a development situation, the webserver in the backend container could be configured to allow CORS from localhost, in production I'm not sure how you'd go about setting it up securely to allow CORS, maybe use an api subdomain network alias for the backend and allow requests from the main domain's network alias?

answered Apr 2, 2020 at 9:43

coedycode

4802 silver badges9 bronze badges

Comments

Med · Accepted Answer · 2022-08-06 18:22:43Z

0

As @coedycode said in a small but precise paragraph it is the backend's issue and you need to specify to accept requests from a special [network:port]. You can annotate in your controller class as bellow to fix the problem.

@CrossOrigin(origins = "http://localhost:3000")

answered Aug 6, 2022 at 18:22

Med

111 silver badge1 bronze badge

Collectives™ on Stack Overflow

Web container cannot call backend container from docker compose

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related