Functions网关超时504

Functions网关超时504

关注
发信
关注(28)粉丝(399)

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

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

问题描述

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

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 

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.

这导致我尝试使用具有CORS的Azure函数访问控制允许凭据

这也无济于事.我不敢相信这会行得通，因为我所有的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);
    }

就可以了！！！ WTF?因此，我为此花了一天的时间，我想这证明这与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.

推荐答案

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

I have same problem, when I call GET with Angular HTTP!

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

I noticed, when I call GET twice, the call is done, third fail, and so on...

我只是在rxjs/operators中添加了.pipe(retry(2))，所以我所有的通话都正常！

I just add .pipe(retry(2)) from rxjs/operators and all my calls working good!

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

P.S. This succeed only on Safari. Chrome, Mozilla, Opera, working fine!

这篇关于仅限Https的Angular 7 PWA + Azure Functions网关超时504的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-22 09:01
Powered by LMLPHP ©2024 Functions网关超时504 0.038699