使用 Angular 在同一台机器上拒绝 Flask 连接

Posted 2023-03-04

【中文标题】使用 Angular 在同一台机器上拒绝 Flask 连接

【英文标题】：Flask connection refused on same machine using Angular

【发布时间】：2021-12-26 06:34:28

【问题描述】：

我有一个在 Azure VM (Ubuntu 20.04) 中运行的 Flask 服务器，它应该在 http://127.0.0.1:5000 上运行，还有一个 Angular 应用程序作为前端并托管 0.0.0.0/80。 Angular 应用程序应该向 Flask 服务器发送 GET/POST 请求，但是当我尝试这样做时，我收到以下错误 [1]。

我为 Flask 中所有路由上的所有域启用了 CORS。 如果我使用 wget 发送请求，它工作得很好。

这是我从 Angular 发送请求的方式：

this.http.post<ILoginResponse>('http://127.0.0.1:5000/login', username: un, password: pswrd).subscribe(data => 
      this.loginResponse.success = data.success;
      this.loginResponse.teamID = data.teamID;
    )

如果 ILoginResponse 是：

export interface ILoginResponse
  success: boolean;
  teamID: string;

我已在 Azure 门户中设置规则以允许端口 5000 上的连接，并在 VM 本身的防火墙中解锁该端口。使用--host 0.0.0.0 运行 Flask 也无济于事。

知道什么可以帮助或我可以朝哪个方向看吗？

[1]

scheduleTask @ zone-evergreen.js:2845
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2878
proto.<computed> @ zone-evergreen.js:1449
(anonymous) @ http.js:1785
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
innerSubscribe @ innerSubscribe.js:67
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
checkCredentials @ login.component.ts:63
login @ login.component.ts:44
LoginComponent_Template_form_ngSubmit_6_listener @ login.component.html:12
executeListenerWithErrorHandling @ core.js:14994
wrapListenerIn_markDirtyAndPreventDefault @ core.js:15029
schedulerFn @ core.js:25687
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25656
onSubmit @ forms.js:5719
FormGroupDirective_submit_HostBindingHandler @ forms.js:5774
executeListenerWithErrorHandling @ core.js:14994
wrapListenerIn_markDirtyAndPreventDefault @ core.js:15029
(anonymous) @ platform-browser.js:582
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28289
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
HttpErrorResponse headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url: 'http://127.0.0.1:5000/login', ok: false, …
error: ProgressEvent isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …
headers: HttpHeaders normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)
message: "Http failure response for http://127.0.0.1:5000/login: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://127.0.0.1:5000/login"
[[Prototype]]: HttpResponseBase
constructor: class HttpErrorResponse
[[Prototype]]: Object```

【问题讨论】：

address 127.0.0.1 只能评估在同一台计算机上运行的程序，但Angular 在用户的浏览器中运行，因此它在用户的计算机上运行，​​因此使用127.0.0.1 它会尝试访问用户的计算机，而不是服务器用烧瓶。

【参考方案1】：

谢谢furas。发布您的建议作为帮助其他社区成员的答案。

地址127.0.0.1 只能评估在同一台计算机上运行的程序，但 Angular 在用户的浏览器中运行，因此它在用户的计算机上运行，​​因此使用127.0.0.1 它会尝试访问用户的计算机，而不是使用 Flask 访问服务器。

使用 --host 0.0.0.0 运行 Flask 也无济于事。

您可以参考nwillo的答案在IPv4地址上运行flask应用

【讨论】：

感谢您花时间回答。事实证明，解决方案是 Angular 端不正确的 CORS 标头（尽管有人告诉我它们设置正确）并使用 0.0.0.0