요청이 실제로 실패하지 않았는데 "TypeError: Unable to get" 수신

Question

저는 React 애플리케이션에서 fetch API를 사용합니다. 응용 프로그램이 서버에 배포되고 정상적으로 실행됩니다. 여러 번 테스트했습니다. 그런데 갑자기 앱이 작동을 멈췄는데 이유를 모르겠습니다. 문제는 get 요청을 보낼 때 서버로부터 유효한 응답을 받았지만 fetch API도 예외를 포착하고 TypeError: Failed to fetch를 표시한다는 것입니다. ; 코드를 전혀 변경하지도 않았는데 이는 모든 React 구성 요소의 문제입니다.

유효한 답변을 받았습니다:

하지만 다음 오류도 발생합니다.

fetch(url)
.then(res => res.json())
.then(데이터 => {
  // 데이터로 뭔가를 한다
})
.catch(거부됨 => {
    console.log(거부됨);
});

다음 자격 증명을 제거하면 "include"는 로컬 호스트에서는 작동하지만 서버에서는 작동하지 않습니다.

StackOverflow와 GitHub에 제공된 모든 솔루션을 시도했지만 효과가 없었습니다.

Answer 1

이 문제에 대한 React 관련 이유가 있을 수 있다는 것을 알고 있지만 "Typeerror: Failed to fetch"에 대한 검색 결과에 이 문제가 먼저 나타났으며 여기에 가능한 모든 이유를 나열하고 싶었습니다.

Fetch 사양에는 Fetch API에서 TypeError가 발생하는 경우가 나열되어 있습니다. https://fetch.spec.whatwg.org/#fetch-api

2021년 1월 기준 관련 문단은 아래와 같습니다. 본문에서 발췌한 내용입니다.

4.6 HTTP 네트워크 획득

주어진 개체 개체를 사용하여 헤더 개체 헤더를 채웁니다.

메서드 단계에서 때때로 유형 오류가 발생합니다.

"Body mixin" 섹션에는 FormData를 사용하는 경우 TypeError를 발생시키는 여러 가지 방법이 있습니다. 이 답변이 매우 길어질 수 있으므로 여기에 나열하지 않습니다. 관련 구절: https://fetch.spec.whatwg.org/#body-mixin

"요청 클래스" 섹션에서 새로운 Request(input, init) 생성자는 잠재적인 유형 오류의 지뢰밭입니다.

응답 수업:

"메서드 가져오기" 섹션에서

이러한 잠재적인 문제 외에도 TypeError를 발생시킬 수 있는 브라우저 관련 동작이 몇 가지 있습니다. 예를 들어 keepalive를 true로 설정하고 페이로드가 64KB를 초과하는 경우 Chrome에서는 TypeError가 발생하지만 Firefox에서는 동일한 요청이 작동합니다. 이러한 동작은 사양에 문서화되어 있지 않지만 Google 검색을 통해 이에 대한 정보를 찾아 가져오기에서 설정한 각 옵션의 제한을 이해할 수 있습니다.

Answer 2

백엔드에서 받는 응답에 문제가 있을 수 있습니다. 서버에서 제대로 작동한다면 응답 헤더에 문제가 있을 수 있습니다.

응답 헤더Access-Control-Allow-Origin 的值。通常，当响应标头的 Access-Control-Allow-Origin를 확인하면 요청 소스와 일치하지 않는 경우, 응답을 수신하더라도 가져오기 API에서 가져올 수 없는 오류가 발생합니다.