본문 바로가기

fetch CORS 오류

(2)
CORS policy 오류, 가장 쉽게 해결하는 방법 CORS policy 오류, 가장 쉽게 해결하는 방법프론트엔드에서 API를 호출하다 보면 콘솔에 blocked by CORS policy라는 빨간 메시지가 나타날 때가 있습니다. 서버 주소도 맞고 API도 정상적으로 실행되는 것 같은데 브라우저에서만 요청이 막히면 무엇이 문제인지 찾기 어려운데요. CORS policy 오류를 해결하려면 먼저 브라우저의 Origin 개념과 서버가 어떤 응답 헤더를 보내야 하는지 이해하는 것이 중요합니다. 무작정 프론트엔드 코드를 수정하기보다 왜 브라우저가 응답 접근을 제한하는지부터 알아보겠습니다. CORS policy란? 먼저 Origin부터 이해하기CORS는 Cross-Origin Resource Sharing의 약자로, 서로 다른 Origin 사이에서 리소스를 공유할..
Failed to fetch, API 요청 실패 원인 10가지 Failed to fetch, API 요청 실패 원인 10가지자바스크립트에서 fetch()로 API를 호출했는데 콘솔에 TypeError: Failed to fetch가 나타날 때가 있습니다. 주소도 맞아 보이고 서버도 실행 중인데 응답조차 확인할 수 없다면 어디부터 점검해야 할지 막막한데요. Failed to fetch 에러는 API가 단순히 404나 500을 반환했다는 의미와는 다릅니다. 브라우저가 요청을 정상적으로 완료하지 못했거나 응답을 자바스크립트에 전달할 수 없는 상황에서 볼 수 있습니다. API 요청이 실패하는 대표적인 10가지 이유와 해결 순서를 알아보겠습니다. Failed to fetch 뜻부터 정확히 이해하기기본적인 fetch 요청은 다음과 같습니다.fetch("/api/users")..