programing

Angular Service Worker - 리소스 로드 실패: 서버가 504(게이트웨이 시간 초과) 상태로 응답했습니다.

bestprogram 2023. 9. 9. 09:47

Angular Service Worker - 리소스 로드 실패: 서버가 504(게이트웨이 시간 초과) 상태로 응답했습니다.

사용하고 있습니다.Angular-CLI 1.6.6그리고.@angular/service-worker 5.2.5우리의Angular 5.2.5app. 프로덕션 환경에서 하나의 오류 메시지가 뜨는 것을 제외하고는 로컬 lite-server뿐만 아니라 프로덕션 서버에서도 모든 것이 정상적으로 작동합니다.

리소스를 로드하지 못했습니다. 서버가 504(게이트웨이 시간 초과) 상태로 응답했습니다.

조사중입니다.ngsw-worker.js스크립트 I은 위의 오류 메시지가 생성되는 행(2466 following)을 찾았습니다.

    async safeFetch(req) {
        try {
            return await this.scope.fetch(req);
        }
        catch (err) {
            this.debugger.log(err, `Driver.fetch(${req.url})`);
            return this.adapter.newResponse(null, {
                status: 504,
                statusText: 'Gateway Timeout',
            });
        }
    } 

캐치에서 콘솔 로깅 오류가 발생하면 다음 오류가 발생합니다.

    TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
        at Driver.safeFetch (ngsw-worker.js:2464)
        at Driver.handleFetch (ngsw-worker.js:1954)
        at <anonymous>

이 질문과 관련된 것으로 보이는 오류:'ServiceWorkerGlobalScope'에서 'fetch'를 실행하지 못함: 'only-if-cacheed'는 '동일한 원점' 모드 오류로만 설정할 수 있는 원인은 무엇입니까?

이 오류가 발생하는 요청은 앱에 대한 첫 번째 액세스입니다.

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

앱 다시 로드 시 오류가 반복되지 않습니다.

누가 여기 좀 도와줄 수 있습니까?버그가 있습니까?safeFetch()서비스 작업자(HashLocation Strategy를 지원할 수도 있음)를 지원할 수 있습니까?내 구성을 변경해야 하는 것이 있습니까?

백엔드에서 ETag 헤더를 비활성화하면 이 문제가 일시적으로 해결되었습니다.

서비스 작업자 구성 파일을 가지고 있었습니다.ngsw-config.json잘못 설정되었습니다.확인해 보는 것을 추천합니다.ngswConfigPath인에angular.json파일을 가지고 있고 어떤 잘못된 구성을 가지고 있는지 확인할 수 있습니다.

캐시 설정을 제거할 때index.html부터ngsw-config.json, 나중에는 매력적으로 통했어요.비슷한 오류가 있을 수도 있습니다.504 Gateway Timeout (from service worker)하지만 우리의 서비스 작업자 구성 파일은 완전히 똑같지 않을 것입니다.

편집: 서비스 작업자 구성을 수정한 후 로컬 개발 환경에서 이 오류가 발생하면 로드된 서비스 작업자를 브라우저로 업데이트해야 다음 작업을 수행할 수 있습니다.

  • 개발 도구 열기
  • 응용프로그램으로 이동
  • 서비스 종사자
  • 다시 로드 시 업데이트를 선택합니다.
  • 새로 고침(어플리케이션은 하드 리로드 없이 정상적으로 작동해야 합니다. 정상적인 새로 고침을 수행할 때 다시는 문제가 발생하지 않아야 합니다.)
  • "다시 로드할 때 업데이트" 되돌리기

여기에 제시된 이 질문에 대한 다른 답변과 관련하여 참고합니다.

  • SSL 인증서 오류가 관련된 이유를 알 수 없습니다.504 Gateway Timeout (from service worker)실제로 서버에 영향을 주지는 않습니다.이는 브라우저 측에서 발생하지만 실제로는 원격 요청이 한 번도 생성되지 않습니다.
  • 또한 백엔드에서 ETAG를 변경하는 이유를 모르겠습니다. 브라우저에서 오류가 발생하고 백엔드/프론엔드 서버가 전혀 작동하지 않습니다!브라우저 쪽에 있는 Angular Service Worker가 던진 오류입니다.

SSL 인증서 만료로 인해 크롬 브라우저에서 이 오류가 발생했습니다.SSL 인증서를 유효한 인증서로 교체하는 것이 해결책이었습니다.

언급URL : https://stackoverflow.com/questions/48828413/angular-service-worker-failed-to-load-resource-the-server-responded-with-a-st