inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

해결된 질문

54

김은수

작성한 질문수 4

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

 

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

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

javascript rest-api spa dom

답변 2

1

효빈 Hyobin

안녕하세요 🙂 질문 감사합니다.

어제 AWS에서 이슈가 발생해 관련 서비스들에도 문제가 생긴 것으로 보이는데요,
현재 10월21일 오전 10시를 기준으로 시도해보았을때 정상 작동하는것 같습니다! 다시 한 번 시도해보시고 그럼에도 문제가 발생한다면 다시 질문 남겨주세요! 감사합니다

0

인프런 AI 인턴

안녕하세요, 인프런 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에서 나올 수 있는 문제 해결 방법

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

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

콜백 함수 메서드 등록

0

82

2

ssr방식 경험

0

75

1

compare 함수 설명에 오해의 소지가 있어보입니다.

0

83

2

API를 비동기 처리하는 이유가 끊겨서 그런건가요?

0

97

2

DOM 트리 보는 곳

0

81

1

배열과 객체의 구조분해할당 방법이 다른 이유

0

82

2

배열 메서드가 순수 함수인지 확인하는 방법

0

72

2

콜백 함수의 매개변수로 _를 쓰는 이유가 무엇인가요?

0

71

2

콜백 함수의 매개변수는 어떻게 구분되나요?

0

59

1

호이스팅 안쓰는게 좋나요?

0

54

2

함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?

0

82

2

?. 연산자는 자바스크립트 연산자인가요?

0

47

1

JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?

0

83

2

자바스크립트 질문

1

103

2

CityList개발-handleLoadMore함수질문

0

71

1

객체와 배열의 const 차이

0

46

1

const 객체/배열 차이

0

63

2

header 개발 새로고침 오류

0

67

2

Promise 객체

1

58

2

cityList 렌더가 안되는 문제

0

55

2

init 함수 앞에 await

1

66

2

동물 앨범 만들기 pushtState 관련

0

60

2

동물 앨범 만들기 사진 관련 문의

0

75

2

자바스크립트 첫걸음 교재 질문..

1

81

2