Flask connection refused on same machine using Angular

Question

I have a Flask server that is running in an Azure VM (Ubuntu 20.04) that is supposed to be run on http://127.0.0.1:5000 and an Angular app that serves as a frontend and hosts 0.0.0.0/80. The Angular app is supposed to send GET/POST requests to the Flask server, but when I try to do so I get the following error [1].

I have CORS enabled for all domains on all routes in Flask. And if I send the request using wget it works perfectly fine.

Here's how I'm sending my request from 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;
    })

With ILoginResponse being:

export interface ILoginResponse{
  success: boolean;
  teamID: string;
}

I have set rules in the Azure portal to allow connections on port 5000 and unlocked the port in the firewall in the VM itself. Running Flask with --host 0.0.0.0 does not help either.

Any idea of what could help or which direction I could look in?

[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` can assess only programs which run on the same computer but `Angular` runs in user's browser so it runs on user's computer so using `127.0.0.1` it tries to access user's computer, not server with Flask. — furas, Nov 15 '21 at 02:45

score 0 · Accepted Answer · answered Nov 19 '21 at 07:39

0

Thank you furas. Posting your suggestion as an answer to help other community members.

Address 127.0.0.1 can assess only programs which run on the same computer but Angular runs in the user's browser so it runs on user's computer so using 127.0.0.1 it tries to access user's computer, not the server with Flask.

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

You can refer to the answer by nwillo to run the flask app on IPv4 address

answered Nov 19 '21 at 07:39

Ecstasy

1,866
1
9
17

1

Thank you for taking time to answer. It turned out that the solution was improper CORS headers on the Angular side (although I was told they were set correctly) and using `0.0.0.0` – Charbel abi daher Nov 20 '21 at 21:26

Flask connection refused on same machine using Angular

1 Answers1