角度前端，用於Flask API，全部在內部。

Question

我有一个问题巫婆角和瓶子里面的码头。在

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

Error image

我的角度服务提出请求。在

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)

    );
  }



}

我的码头工人-合成.yml在

^{pr2}$

我如何解决这个问题？在

Answer 1

当您从Angular应用程序发出请求时，您的浏览器正在发出请求，而不是angular容器。因此，运行浏览器的主机将尝试解析http://waiter_flask_1:5000主机，而不是angular container, and since your host cannot resolve the namewaiter_flask_1`，请求将失败。在

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

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

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

^{pr2}$