Angular 7 PWA + Время ожидания шлюза функций Azure 504 только с HTTPS

Так что название говорит само за себя!

У меня есть приложение 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.

Также все мои запросы API отлично работают с Postman через https.

введите описание изображения здесь

Обновление. Итак, небольшое развитие, если я запускаю это локально без включения 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 не выполнен но без каких-либо подсказок относительно того, почему большинство людей получают это.

Это привело меня к попытке этого Azure Functions Access-Control-Allow-Credentials с CORS

Это тоже не помогло. Я не был уверен, что это сработает, поскольку все мои настройки CORS были в порядке. Я доказал это, вставив токен.

Я решил полностью исключить Angular из уравнения, не используя Angular HttpClient, используя код ниже:

 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 во всем своем приложении.


person Lenny D    schedule 11.11.2018    source источник


Ответы (1)


У меня такая же проблема, когда я вызываю GET с Angular HTTP!

Я заметил, что когда я звоню GET дважды, вызов выполняется, третий терпит неудачу и так далее...

Я просто добавляю .pipe(retry(2)) из rxjs/operators, и все мои звонки работают хорошо!

P.S. Это удается только в Safari. Хром, Мозилла, Опера работают нормально!

person Ruslan Jackson    schedule 02.05.2019
comment
Спасибо. Это фактически решило мою проблему (так же, как описано в вопросе). - person Tom Faltesek; 25.09.2019
comment
У нас были серьезные проблемы в производственных средах с немного плохими сетями, когда для некоторых запросов API сервисный работник немедленно возвращал 504, хотя впоследствии API возвращал 200 в ответе API. (Хотя запрос API в любом случае не должен проходить через работника службы). Похоже, что .pipe(retry(2)) в соответствии с этой документацией решил это для нас: blog.angularindepth.com/ - person chris08002; 23.10.2019