TypeError: Failed to fetch 오류는 JavaScript에서 Fetch API를 사용하는 개발자에게 흔한 문제입니다. 이는 네트워크 요청이 완료되지 못했음을 나타내는 일반적인 오류 메시지입니다. 원인은 간단한 네트워크 연결 문제부터 CORS와 같은 더 복잡한 서버 측 설정까지 다양할 수 있습니다.

이 가이드에서는 가장 일반적인 원인과 해결 방법을 안내합니다.

“Failed to fetch”의 원인은 무엇인가요?

이 오류는 fetch() 요청이 시작되었지만 완료될 수 없을 때 브라우저 콘솔에 나타납니다. 브라우저는 서버로부터 어떠한 응답도 받지 못합니다. 주요 원인은 다음과 같습니다.

  1. 네트워크 연결 문제: 가장 기본적인 원인은 인터넷 연결이 없거나 방화벽이 요청을 차단하는 경우입니다.
  2. CORS (Cross-Origin Resource Sharing) 정책: 가장 빈번한 원인입니다. 데이터를 요청하는 서버가 당신의 도메인에서 리소스에 접근하는 것을 허용하지 않습니다.
  3. 잘못된 URL 또는 DNS 문제: URL에 오타가 있거나 도메인 이름을 DNS에서 확인할 수 없습니다.
  4. 차단된 요청: 브라우저 자체(예: 혼합 콘텐츠 차단) 또는 브라우저 확장 프로그램(예: 광고 차단기)에 의해 요청이 차단될 수 있습니다.
  5. 서버 응답 없음: 지정된 URL의 서버가 다운되었거나 응답하지 않을 수 있습니다.

“Failed to fetch” 해결 방법

문제 해결 단계를 살펴보겠습니다.

1단계: 네트워크 연결 및 URL 확인하기

코드를 살펴보기 전에 기본 사항을 확인하세요.

  • 인터넷에 연결되어 있나요?
  • 접속하려는 서버가 온라인 상태인가요? API URL을 브라우저 주소창에 직접 붙여넣어 테스트해 볼 수 있습니다.
  • fetch() 호출에서 URL을 올바르게 입력했나요? 도메인, 경로 또는 프로토콜(http vs. https)에 오타가 있는지 확인하세요.

2단계: CORS 문제 조사하기

기본 사항이 확인되면 문제는 CORS일 가능성이 높습니다. CORS로 인한 “Failed to fetch” 오류는 요청의 출처(웹 페이지)가 허용된 출처 목록에 없기 때문에 서버가 응답을 보내기 전에 요청을 거부했음을 의미합니다.

CORS 문제 확인 방법: 브라우저 개발자 도구(F12)를 열고 Console 탭으로 이동합니다. 종종 “Failed to fetch”와 함께 더 자세한 오류 메시지를 볼 수 있습니다.

Access to fetch at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

해결책 (서버를 제어할 수 있는 경우): 서버가 응답에 Access-Control-Allow-Origin 헤더를 포함하도록 구성해야 합니다. 이 헤더는 브라우저에 어떤 출처가 서버의 리소스에 접근할 수 있는지 알려줍니다.

Node.js/Express 서버의 경우 cors 미들웨어를 사용할 수 있습니다.

npm install cors

const express = require('express');
const cors = require('cors');
const app = express();

// 모든 출처 허용
app.use(cors());

// 또는 특정 출처만 허용
// app.use(cors({
//   origin: 'https://your-frontend-domain.com'
// }));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Success!' });
});

app.listen(3001, () => console.log('Server is running'));

해결책 (서버를 제어할 수 없는 경우): 타사 API를 사용하는 경우 서버 측 CORS 정책을 변경할 수 없습니다. 표준적인 해결책은 프록시 서버를 만드는 것입니다. 애플리케이션이 자신의 서버에 요청을 보내면, 그 서버가 타사 API에 요청을 보내고 응답을 다시 애플리케이션으로 전달합니다. 서버 간 요청은 브라우저 CORS 정책의 적용을 받지 않으므로 이 방법으로 문제를 해결할 수 있습니다.

3단계: 혼합 콘텐츠 확인하기

브라우저는 HTTPS를 통해 로드된 페이지에서 HTTP 리소스를 요청하는 것을 차단합니다. 이를 “혼합 콘텐츠” 차단이라고 합니다. 사이트가 https://에 있다면 API 요청도 https:// 엔드포인트로 이루어지는지 확인하세요.

4단계: 브라우저 확장 프로그램 비활성화하기

광고 차단기나 개인 정보 보호 관련 브라우저 확장 프로그램을 일시적으로 비활성화하여 네트워크 요청을 방해하는지 확인합니다.

결론

“Failed to fetch” 오류는 체계적인 문제 해결이 필요한 광범위한 네트워크 관련 오류입니다. 네트워크 연결 및 URL 오타와 같은 가장 간단한 설명부터 시작하여 CORS 정책과 같은 더 복잡한 문제로 넘어가세요. 대부분의 웹 개발 시나리오에서 서버의 잘못된 CORS 헤더 구성이 주된 원인입니다.

Leave a comment

You may also enjoy