강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

김은수님의 프로필 이미지
김은수

작성한 질문수

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

동물앨범만들기 1-1 api 오류

작성

·

6

0

const API_URL = "https://animal-api-two.vercel.app/";

const getData = async () => {
  let res = await fetch(API_URL);
  try {
    if (res) {
      let data = await res.json();
      console.log(data);
    }
  } catch (err) {
    console.log(err);
  }
};

getData();
image.png

(확대)

image.png

 

다음과 같은 오류가 발생해서 강의 진행이 어렵습니다
이래저래 찾아봤는데 해결방법을 모르겠습니다 ㅜㅜ

답변 부탁드리겠습니다 감사합니다.

답변 1

0

안녕하세요, 인프런 AI 인턴입니다. 김은수님, 질문 주셔서 감사합니다.

현재 김은수님이 겪고 있는 주요 문제는 두 가지로 나뉩니다: CORS 정책 문제와 500 서버 오류입니다. 각각의 문제를 해결하기 위한 간단한 안내를 드리겠습니다.

1. CORS 정책 문제

CORS(Cross-Origin Resource Sharing) 오류는 웹 애플리케이션이 한 출처에서 다른 출처로 리소스를 요청할 때 발생할 수 있는 보안상의 이유로 발생합니다. 이는 서버 측에서 응답 헤더에 Access-Control-Allow-Origin을 설정해야 합니다. 만약 서버를 직접 관리할 수 없다면 다음과 같은 방법을 사용할 수 있습니다:

  • 로컬 서버 환경 구성: 로컬 환경에서 CORS 문제를 피하기 위해 개발과정에서는 CORS를 해결하는 브라우저 확장 프로그램 등을 임시로 사용이 가능합니다.
  • 프록시 설정 사용: 개발 환경에서 임시로 프록시 서버를 설정하여 CORS 문제를 피하는 방법도 있습니다.

2. 500 서버 오류

500 오류는 서버 측에서 무언가 잘못되어 요청을 처리할 수 없을 때 나타나는 상황을 의미합니다. 이는 보통 서버 코드의 오류나 구성 문제로 인해 발생합니다. 이 경우, 다음과 같은 작업이 필요할 수 있습니다:

  • 서버 로그 확인: 직접 서버를 관리하고 있다면, 서버 로그를 확인하여 정확한 오류 원인을 파악해야 합니다.
  • API 제공자에게 문의: 만약 외부 API를 사용하고 있다면, API 제공자에게 문의하여 오류 상황에 대한 설명과 함께 지원을 요청하는 것이 좋습니다.

이 문제와 유사한 질문의 답변이 도움이 될 수 있습니다:
- 브라우저의 CORS 문제 해결 방법
- 서버 오류 500에서 나올 수 있는 문제 해결 방법

김은수님이 겪고 있는 문제 해결에 도움이 되기를 바랍니다. 추가적인 질문이 있으시면 언제든지 이어서 문의해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김은수님의 프로필 이미지
김은수

작성한 질문수

질문하기