仅限Https的Angular 7 PWA + Azure Functions网关超时504

Question

因此标题几乎说明了一切！

我有一个编译为PWA的Angular 7应用，我的package.json在下面。我的后端api是用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"
  },

我遇到的问题是，当我将api端点设置为使用https时，出现504网关超时错误。我知道https的配置/功能很好，因为这都是由Azure使用Azure Functions自动配置的。

我所有的API请求也都可以通过https与Postman一起正常工作。

更新-有点发展，如果我在未启用PWA的情况下在本地运行，则会得到以下不同的ERR_SPDY_PROTOCOL_ERROR

这是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)

好的，所以5小时后再进行一次更新！这变得越来越怪异。

我将有效令牌强制放入标头中以查看登录后其他端点是否正常工作。令人惊讶的是，即使在https下，其他所有东西都可以正常工作，这只是我的Https POST / token x-www-form-urlencoded请求没有工作？！？！？（Http很好！）

因此，出于绝望，我安装了FireFox，只是看我是否可以获得更多的调试信息，这确实可以做到。我收到此错误的CORS请求未成功，但没有任何线索说明为什么大多数人会收到。

这导致我尝试使用CORS尝试使用此Azure Functions访问控制权限凭据

这也没有帮助。我不相信它会起作用，因为我所有的CORS设置都很好，我通过强制令牌证明了这一点。

我决定通过以下代码不使用Angular HttpClient，从而完全摆脱Angular的困扰：

 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);
    }

而且就可以了！！！WTF？因此，我为此花了一天的时间，我想这证明这与Angular HttpClient有关。

所以我现在就继续讲。

如果有人知道为什么会发生这种情况，或者在意识到之前为什么会遇到这种情况，因为我宁愿保持一致并在我的整个应用程序中使用HttpClient。

Answer 1

当我使用GETAngular HTTP 调用时，我遇到了同样的问题！

我注意到，当我调用GET两次时，调用完成，第三次失败，依此类推......

我刚刚添加.pipe(retry(2))，rxjs/operators我的所有通话都运行良好！

PS 这仅在 Safari 上成功。Chrome、Mozilla、Opera，工作正常！