title: Angular 7 PWA + Azure Functions Gateway Timeout 504 only with Https
body: <p>So the title pretty much says it all!</p>
  
  <p>I have an Angular 7 app compiled as PWA my package.json is below. My backend api is written in AzureFunctions V2. </p>
  
  <pre><code>"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"
    },
  </code></pre>
  
  <p>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.</p>
  
  <p>Also all my api requests work fine with Postman over https.</p>
  
  <p><a href="https://i.stack.imgur.com/q8Btp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/q8Btp.png" alt="enter image description here"></a></p>
  
  <p>Update - So a bit of a development, if I run this locally without PWA enabled I get the following different ERR_SPDY_PROTOCOL_ERROR </p>
  
  <p>This is debug info in chrome <code>chrome://net-internals/#events</code></p>
  
  <pre><code>t=9314 [st= 1]        UPLOAD_DATA_STREAM_READ  [dt=0]
                        --&gt; current_position = 0
  t=9314 [st= 1]        HTTP2_STREAM_UPDATE_SEND_WINDOW
                        --&gt; delta = -73
                        --&gt; stream_id = 3
                        --&gt; 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
                        --&gt; description = "Server reset stream."
                        --&gt; net_error = "ERR_SPDY_PROTOCOL_ERROR"
                        --&gt; stream_id = 3
  t=9335 [st=22]     -HTTP_TRANSACTION_READ_HEADERS
                      --&gt; net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
  t=9335 [st=22]   -URL_REQUEST_START_JOB
                    --&gt; net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
  t=9335 [st=22]    URL_REQUEST_DELEGATE_RESPONSE_STARTED  [dt=0]
  t=9335 [st=22] -REQUEST_ALIVE
                  --&gt; net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
  </code></pre>
  
  <p>Ok so another update 5hrs later! This just gets more and more weird.</p>
  
  <p>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!)</p>
  
  <p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed" rel="noreferrer">CORS request did not succeed</a> but with none of the clues as to why that most people get.</p>
  
  <p>This led me to attempting this <a href="https://blogs.msdn.microsoft.com/benjaminperkins/2017/04/12/azure-functions-access-control-allow-credentials-with-cors/" rel="noreferrer">Azure Functions Access-Control-Allow-Credentials with CORS</a></p>
  
  <p>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.</p>
  
  <p>I decided to take Angular totally out of the equation by not using the Angular HttpClient using the code below:</p>
  
  <pre><code> 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 &amp;&amp; this.status === 200) {
            // save token here 
          }
        };
        xhr.send(body);
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>So I'll go with this for now.</p>
  
  <p>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.</p>