Question 351856 in Docker Question posted in
The official documentation can be found here.

Angular client application failing to resolve address for backend service from docker container

I am trying to run angular frontend and golang backend application using docker containers
they are created successfully but when frontend is trying to make any http call to backend service it is failing with

GET http://backend:8080/questions net::ERR_NAME_NOT_RESOLVED

and from inspecting it show that frontend application is makeing request to
Request URL:
http://backend:8080/questions
Referrer Policy:
strict-origin-when-cross-origin

version: "3.8"
services:
  frontend:
    build: ./question-paper
    ports:
      - "4200:4200"

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - DB_NAME=questions
      - DB_PORT=3306
      - DB_HOST=database
      - DB_PASSWD=root
      - DB_USER=root
    depends_on:
      - database

  database:
    image: mysql
    restart: always
    environment:
      MYSQL_DATABASE: questions
      MYSQL_PASSWORD: root
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3806:3306"
    volumes:
      - ./init.sql:/docker-entrypoint-initdb.d/  # Check the path to init.sql
      - my-db:/var/lib/mysql

volumes:
  my-db:

and my angular code

import { HttpClient } from '@angular/common/http';
import { Questions } from '../model/question-model';
import { Observable } from 'rxjs';
import { Inject, Injectable } from '@angular/core';


@Injectable({
  providedIn: 'root',
})
export class QuestionService {
  constructor(private httpClient: HttpClient) {}

  GetQuestions(): any {
    return this.httpClient.get('http://backend:8080/questions');
  }
}

backend code

func main(){
    mux := mux.NewRouter()
    handle := h.CORS(
        h.AllowedOrigins([]string{"*"}),
        h.AllowedMethods([]string{"GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"}),
        h.AllowedHeaders([]string{"Content-Type", "Authorization", "Origin", "Accept"}),
    )
    mux.HandleFunc("/questions", handlers.GetQuestions)
    http.ListenAndServe(":8080", handle(mux))
}

error

can someone help with this why the request is failing,
I can across some solution that say to use ip address of backend service in the http url i don’t think that’s good choice

Tags:

2

Answers


  1. 0

    By default, Docker puts all services in compose file in a single network,
    I guess what you can try is to put everything in a custom network.

    version: "3.8"
services:
  frontend:
    build: ./question-paper
    ports:
      - "4200:4200"
    networks:
      - mynet

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    networks:
      - mynet

    environment:
      - DB_NAME=questions
      - DB_PORT=3306
      - DB_HOST=database
      - DB_PASSWD=root
      - DB_USER=root
    depends_on:
      - database

  database:
    image: mysql
    restart: always
    environment:
      MYSQL_DATABASE: questions
      MYSQL_PASSWORD: root
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3806:3306"
    networks:
      - mynet

    volumes:
      - ./init.sql:/docker-entrypoint-initdb.d/  # Check the path to init.sql
      - my-db:/var/lib/mysql

volumes:
  my-db:

networks:
  mynet:
     driver: bridge

    btw, try to docker exec your container and run curl backend:8080/questions, would be easier to debug this.

    Login or Signup to reply.
  2. 0

    You client-side app doesn’t have access to the Docker internal DNS (GET http://backend:8080), read about it here.

    You can use a reverse proxy like ngnix or manage the url with enviroment-based approach like:

    Development: environment.ts (ng serve):

    export const environment = {
  apiUrl: 'http://localhost:8080'
};

    Production: environment.prod.ts (ng build --prod):

    export const environment = {
  apiUrl: 'http://myapi.com'
};

    Now instead of hard coding your api url you can refer to the environment:

    import { environment } from '../../environments/environment';

export class QuestionService {
  private baseUrl = environment.apiUrl; // Use apiUrl from environment

  getQuestions(): Observable<any> {
    return this.httpClient.get(`${this.baseUrl}/questions`);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search