Angular 7 PWA + Azure Functions Gateway Timeout 504 only with Https

Question

So the title pretty much says it all!

I have an Angular 7 app compiled as PWA my package.json is below. My backend api is written in AzureFunctions V2.

"dependencies": {
    "@angular-devkit/core": "^7.0.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/platform-server": "^7.0.3",
    "@angular/pwa": "^0.10.5",
    "@angular/router": "^7.0.3",
    "@angular/service-worker": "^7.0.3", 
    "@types/date-fns": "^2.6.0",
    "angular-calendar": "^0.26.4",
    "chartist": "^0.11.0",
    "core-js": "^2.5.7",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },

The problem I am having is that when I set my api endpoint to use https I get 504 Gateway Timeout errors. I know the https configuration/functionality is fine as this is all automatically configured by Azure with Azure Functions.

Also all my api requests work fine with Postman over https.

Update - So a bit of a development, if I run this locally without PWA enabled I get the following different ERR_SPDY_PROTOCOL_ERROR

This is debug info in chrome chrome://net-internals/#events

t=9314 [st= 1]        UPLOAD_DATA_STREAM_READ  [dt=0]
                      --> current_position = 0
t=9314 [st= 1]        HTTP2_STREAM_UPDATE_SEND_WINDOW
                      --> delta = -73
                      --> stream_id = 3
                      --> window_size = 1048503
t=9314 [st= 1]     -HTTP_TRANSACTION_SEND_REQUEST
t=9314 [st= 1]     +HTTP_TRANSACTION_READ_HEADERS  [dt=21]
t=9335 [st=22]        HTTP2_STREAM_ERROR
                      --> description = "Server reset stream."
                      --> net_error = "ERR_SPDY_PROTOCOL_ERROR"
                      --> stream_id = 3
t=9335 [st=22]     -HTTP_TRANSACTION_READ_HEADERS
                    --> net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
t=9335 [st=22]   -URL_REQUEST_START_JOB
                  --> net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
t=9335 [st=22]    URL_REQUEST_DELEGATE_RESPONSE_STARTED  [dt=0]
t=9335 [st=22] -REQUEST_ALIVE
                --> net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)

Ok so another update 5hrs later! This just gets more and more weird.

I forced in a valid token into my header to see if other endpoints were working once I was logged in. Amazingly everything else worked fine even under https it was just my Https POST /token x-www-form-urlencoded request that didn't work ?!?!? (Http is fine!)

So out of despair I installed FireFox just see if I could get more debug information, which it sort of did. I got this error CORS request did not succeed but with none of the clues as to why that most people get.

This led me to attempting this Azure Functions Access-Control-Allow-Credentials with CORS

This didn't help also. I wasn't convinced it would work as all my CORS settings were fine I proved this by forcing in the token.

I decided to take Angular totally out of the equation by not using the Angular HttpClient using the code below:

 public getToken()
    {
      let xhr = new XMLHttpRequest();
      xhr.open("POST", this.API_URL + '/token', true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      xhr.onreadystatechange = function() { 
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
          // save token here 
        }
      };
      xhr.send(body);
    }

And it just Works!!! WTF ? So I lost a day on this, and I guess that proves that this is related to the Angular HttpClient.

So I'll go with this for now.

If anyone know's why this might be happening or have come across this before it would be appreciated, as I'd rather be consistent and use the HttpClient throughout my app.

Answer 1

I have same problem, when I call GET with Angular HTTP!

I noticed, when I call GET twice, the call is done, third fail, and so on...

I just add .pipe(retry(2)) from rxjs/operators and all my calls working good!

P.S. This succeed only on Safari. Chrome, Mozilla, Opera, working fine!