Angular 7 PWA + Azure Functions Gateway Timeout 504 仅适用于 Https

本文介绍了Angular 7 PWA + Azure Functions Gateway Timeout 504 仅适用于 Https的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

So the title pretty much says it all!

我有一个编译为 PWA 的 Angular 7 应用程序，我的 package.json 如下.我的后端 api 是用 AzureFunctions V2 编写的.

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"
  },

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

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.

此外，我所有的 api 请求都可以通过 https 与 Postman 一起正常工作.

Also all my api requests work fine with Postman over https.

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

Update - So a bit of a development, if I run this locally without PWA enabled I get the following different ERR_SPDY_PROTOCOL_ERROR

这是 chrome 中的调试信息 chrome://net-internals/#events

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)

好的，5 小时后再次更新！这只会变得越来越奇怪.

Ok so another update 5hrs later! This just gets more and more weird.

我在我的标头中强制输入了一个有效的令牌，以查看其他端点是否在我登录后正常工作.令人惊讶的是，即使在 https 下，其他一切都运行良好，这只是我的 Https POST/token x-www-form-urlencoded 请求没用?！?！?(Http没问题！)

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!)

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

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.

这让我尝试了这个Azure Functions Access-Control-Allow-Credentials with CORS

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

我决定通过使用以下代码不使用 Angular HttpClient 将 Angular 完全排除在外:

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

它只是有效！！！跆拳道?所以我在这个上浪费了一天，我想这证明这与 Angular HttpClient 有关.

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.

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

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.

more

Angular 7 PWA + Azure Functions Gateway Timeout 504 仅适用于 Https

问题描述

推荐答案