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

Question

我有一个在 Azure VM (Ubuntu 20.04) 中运行ning 的 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 的烧瓶也无济于事。

知道什么可以提供帮助或我可以关注哪个方向吗？

[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```

Answer 1

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

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

Running Flask with --host 0.0.0.0 does not help either.

可以参考nwillo对运行flask app在IPv4地址上的回答

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

Flask connection refused on same machine using Angular

python

azure

cors

flask

angular