Angular frontend, for Flask api, all inside docker

Question

I have a problem witch Angular and Flask inside Docker.

Angular linking to Flask app inside docker, but when I want to make http requests to API from Angular returns error.

My Angular service for make requests.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders,Response } from '@angular/common/http';

import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import {User} from './user';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};


@Injectable({providedIn: 'root'})
export class LoginService {
  private loginUrl = "http://waiter_flask_1:5000/api/account/login";


  constructor(
    private http:HttpClient
  ) { }


  loginUSer(): Observable<any> {
    return this.http.post(this.loginUrl,{"username":"test","password":"test"},httpOptions).pipe(
      map((response:Response)=>response)

    );
  }



}

My docker-compose.yml

version: '3.3'

services:
  flask:
    image: flask
    ports:
      - "5000:5000"
    volumes:
      - ./run.py:/app/run.py
      - ./api:/app/api
    links:
      - database:waiter_database_1


  angular:
    image: angular
    ports:
      - "4200:4200"
    volumes:
      - ./docker-angular:/usr/src/app
    links:
      - flask:waiter_flask_1

How can I resolve this problem?

Ntokozo Zwane · Accepted Answer · 2020-03-28 21:36:50Z

2

When you make the request from the Angular app, your browser is making the request, not the angular container. Therefore your host machine that you are running your browser from will try to resolve the http://waiter_flask_1:5000 host not the angular container, and since your host cannot resolve the name waiter_flask_1, the request will fail.

What you need to do is replace the url your angular app is using to make the HTTP request with a url that your host is able to resolve e.g:

http://host.ip.address:5000/api/account/login

where host.ip.address is the ip address for the host running the flask container. If, for example, you are running the flask container on the same host that you are accessing your browser, then your url can point to localhost, eg:

http://127.0.0.1:5000/api/account/login

edited Mar 28, 2020 at 21:36

answered Jan 6, 2019 at 0:22

Ntokozo Zwane

1,7621 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ntokozo Zwane Over a year ago

@FaalSta that's great, happy you got it working :). If this answer was what helped you to get it working, please mark it as the accepted answer so other people will know if it does solve the issue in your question.

Collectives™ on Stack Overflow

Angular frontend, for Flask api, all inside docker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related