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

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