CODEWITHSUNDEEP
pythonangulardockernginxflask
Faal Sta
Faal Sta

Reputation: 3

Angular frontend, for Flask api, all inside docker

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.

Error image

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?

Upvotes: 0

Views: 1459

Answers (1)

Ntokozo Zwane
Ntokozo Zwane

Reputation: 1742

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

Upvotes: 2

Related Questions