inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

함수 컴포넌트와 필수 Hook

CORS 에러

228

코해

작성한 질문수 16

0

import React from 'react';
import Axios from 'axios';

class EpisodeList extends React.Component {
  state = {
    episodeList: [],
  };

  componentDidMount() {
    const apiUrl = 'https://www.tvmaze.com/api';
    const params = {
      q: 'mr-robot',
      embed: 'episodes',
    };
    Axios.get(apiUrl, { params })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });
  }
  render() {
    const { episodeList } = this.state;
    return (
      <div>
        <h1>EpisodeList</h1>
        {JSON.stringify(episodeList)}
      </div>
    );
  }
}

export default EpisodeList;

위 코드와 같이 실행하면 다음의 에러가 뜹니다.

Access to XMLHttpRequest at 'https://www.tvmaze.com/api?q=mr-robot&embed=episodes' from localhost/:1 origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

사이트의 api가 바뀌어서 url과 쿼리는 현재 작동하는 방식으로 바꾸었을 뿐 이외에는 동일하게 따라했는데, 이렇게 되는 이유를 모르겠습니다.

참고로 다음을 실행하였을 때 정상적으로 응답이 오는 것을 확인하였습니다.

http https://www.tvmaze.com/api q==mr-robot embed==episodes

 

react python django docker

답변 1

0

이진석

안녕하세요.

강의에서 사용한 주소는 https://api.tvmaze.com/singlesearch/shows 입니다. 검색어 mr-robot으로 요청했을 때 검색결과가 없어서 404 응답이 오는 것으로 보이구요.

image

아래처럼 다른 검색어로 요청을 해보면, 이렇게 응답이 오고 있음을 확인했습니다.

https://api.tvmaze.com/singlesearch/shows?q=love&embed=episodes

image

위 주소로 해서 검색어를 love 로 변경해서 요청해보시겠어요?

--

https://www.tvmaze.com/api 페이지는 API 설명페이지입니다. 일반 문서 페이지이니까, API 요청을 허용하는 CORS 설정이 안 되어있어서, 말씀하신 CORS 오류가 발생한 것으로 보입니다.

확인해보시고 댓글 부탁드립니다.

화이팅입니다. :-)

안녕하세요.

0

49

1

[OneToOne Field Demo] get_user_model() 메서드를 활용해야 하는 이유?

0

273

1

useEffect 훅에서 else 유무에 따른 결과

0

211

1

useAxios 훅의 dependency array 설정

0

245

1

useEffect에서 변수 업데이트 관련 질문

0

382

1

rest_framework.generics.CreateAPIView의 model 속성 유무

0

268

1

bootstrap4

0

470

4

리뉴얼 강의가 오픈이 되면 기존 강의는 더이상 못보는걸까요

1

364

1

admin form에서 앞선 필드 선택 후 다른 필드 select widget 구성하는 방법

0

573

3

useState는 필수일까요?

0

263

1

python manage.py makemigrations instagram 시 created_at default 오류가 발생합니다.

0

600

4

Django allauth를 사용한 소셜 로그인 시 에러

0

655

1

프로젝트명 변경 뒤, 디버그툴바+디버그모드 사용 시 에러

0

555

2

useLocalStorage() 함수 사용여부

0

228

1

django에 LOGIN_URL = '/accounts/login/'의 의미?

0

449

1

리듀서의 의미 재확인

0

430

1

simple-jwt Refresh Token 사용 노하우

0

898

2

docker compose 를 통한 배포 관련 오류 문의

0

670

1

파이썬 속도 장고 관련 궁금한게 있습니다.

0

364

1

is_like_user

0

233

1

related_name 오류

0

273

1

re_path 오류

0

258

1

re_path url

0

251

1

No post matches the given query

0

661

2