azure-functions - Angular 7 PWA + Azure Functions Gateway Timeout 504 仅使用 Https

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 Gateway Timeout 错误。我知道 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小时后再次更新!这只会变得越来越奇怪。

我强制在我的 header 中输入一个有效的 token ，以查看我登录后其他端点是否正常工作。令人惊讶的是，即使在 https 下，其他一切都可以正常工作，这只是我的 Https POST/token x-www-form-urlencoded 请求没有工作 ？!？!？ (http很好!)

所以出于绝望，我安装了 FireFox，只是看看我是否可以获得更多的调试信息，它确实做到了。我收到此错误 CORS request did not succeed但对于大多数人得到的原因没有任何线索。

这导致我尝试这个 Azure Functions Access-Control-Allow-Credentials with CORS

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

我决定通过使用以下代码不使用 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);
    }

它只是工作!怎么回事？所以我为此浪费了一天的时间，我想这证明这与 Angular HttpClient 有关。

所以我现在就这样做。

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

Answer 1

我有同样的问题，当我调用 GET使用 Angular HTTP!

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

我只是添加 .pipe(retry(2))来自 rxjs/operators我所有的电话都很好!

附言这仅在 Safari 上成功。 Chrome、Mozilla、Opera，运行良好!