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

霸气de小男生 提交于 2019-12-21 13:08:48

问题


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.


回答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!



来源:https://stackoverflow.com/questions/53249379/angular-7-pwa-azure-functions-gateway-timeout-504-only-with-https

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!