python - Angular前端，用于Flask API，全部在docker内部

Question

我在Docker中遇到问题Angular和Flask。

Angular链接到Docker内部的Flask应用程序，但是当我想从Angular向API发出HTTP请求时会返回错误。

Error image

我的Angular服务，用于发出请求。

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)

    );
  }



}

我的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

我该如何解决这个问题？

Answer 1

当您从Angular应用发出请求时，您的浏览器正在发出请求，而不是angular容器。因此，运行浏览器的主机将尝试解析http://waiter_flask_1:5000主机而不是angular容器，并且由于主机无法解析名称waiter_flask_1，因此请求将失败。

您需要做的是用您的主机能够解析的网址替换您的angular应用程序用来发出HTTP请求的网址，例如:

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

其中 host.ip.address是运行 flask容器的主机的IP地址。例如，如果您正在访问浏览器的主机上运行 flask容器，则您的网址可以指向 localhost，例如:

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