[질문] 14.3 newsapi API - axios - cors issues

jongsun-park commented 4 years ago

안녕하세요! 최근 개정판을 구해 열심히 보고 있습니다. 오픈 소스 api를 사용해서 데이터를 가져오는 과정에서 cors 에러가 발생합니다.

구글에서 찾은 방법은 프록시를 해주는 곳에서 api 주소를 넘겨주는 방법인데, 이 방법으로도 예제 코드는 잘 돌아 갑니다. 대신 임시로 사용 할 수 있는 방법 처럼 보이는데, 실무에서는 어떤 방법으로 cors 문제를 해결 할 수 있을 까요?

const apiKey = '';
const country = 'kr';
const url = `http://newsapi.org/v2/top-headlines?country=${country}&apiKey=${apiKey}`;
const proxy = 'https://cors-anywhere.herokuapp.com/';

const onClick = async () => {
    try {
      const response = await axios.get(proxy +url);
      setData(response.data);
    } catch (error) {
      console.log(error);
    }
  };

velopert commented 4 years ago

newsapi 에서 원래는 CORS 허용을 해줬었는데요.. 최근에 갑자기 정책이 바뀌었나보네요ㅠㅠ 실무에서는, 해당 API가 자체적으로 만든거라면

도메인이 같으면 별 이슈가 없을 것이며 도메인이 다르다면 서버측에서 CORS 허용을 위한 작업을 해야 하고,

만약에 외부 API라면 백엔드 서버를 거쳐서 요청을 합니다.

이 변화가 5월 22일쯤에 발생한것같은데.. newsapi 측에서 따로 허용을 안해주면 책에선 다음 중쇄때 cors-anywhere 를 사용하도록 하고, 다음 개정판에서는 newsapi 말고 다른 API를 사용해야겠습니다.

jongsun-park commented 4 years ago

답변 감사드립니다 :)

velopert commented 4 years ago

다행히도 다시 CORS 허용을 해준 것 같네요~ 이슈 닫겠습니다!~

velopert / learning-react

[질문] 14.3 newsapi API - axios - cors issues #276