时间戳

首页 > 解决方案 > Angular 前端，用于 Flask api，全部在 docker 内

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

问题描述

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

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

错误图片

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

我该如何解决这个问题？

标签： pythonangulardockernginxflask

解决方案

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

您需要做的是将您的 Angular 应用程序用来发出 HTTP 请求的 url 替换为您的主机能够解析的 url，例如：

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

运行容器host.ip.address的主机的 IP 地址在哪里。flask例如，如果flask您在访问浏览器的同一主机上运行容器，那么您的 url 可以指向localhost，例如：

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

推荐阅读