Question

所以标题几乎说明了一切！

我有一个Angular 7应用编译为PWA，我的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 request did not succeed，但没有任何线索说明大多数人为什么会得到这个线索。

这导致我尝试使用此Azure Functions Access-Control-Allow-Credentials with CORS

这也没有帮助。我不相信它会起作用，因为我所有的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

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

我注意到，当我两次致电GET时，呼叫已完成，第三次失败，依此类推...

我刚刚从.pipe(retry(2))中添加了rxjs/operators，我的所有通话都工作正常！

P.S。仅在Safari上成功。 Chrome，Mozilla，Opera正常运行！

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

1 个答案: