CORS anywhere를 소개합니다

오늘은 Notion API를 활용하여 개인 블로그를 개발하던 중에 알게 된 CORS anywhere라는 서비스를 소개해보려 합니다.

 

문제 상황

블로그 제작을 위해 Notion API를 통해 간단히 Page Data를 조회하는 기능을 구현하고 있었습니다.

기능 구현을 위해 Axios를 사용해 간단한 API를 구현하고, 작동 확인을 위해 console.log를 확인했습니다.

export async function fetchNotionPageContent(pageId: string) {
  try {
    const response = await axios.get(
      `${NOTION_API_URL}pages/${pageId}`,
      {
        headers: {
          Authorization: `Bearer ${NOTION_API_TOKEN}`,
          "Notion-Version": "2022-06-28",
        },
      },
    );

    return response;
  } catch (error) {
    console.error("Error fetching Notion page:", error);
    return null;
  }
}

 

 

그런데 다음과 같은 CORS 에러가 발생했습니다.

에러가 날 것 같다는 예상은 어느정도 하고 있던 터라, 곧 바로 구글링을 통해 해답을 찾아 나섰습니다.

 

 

그 결과,  대부분 Proxy 서버를 구축하여 CORS를 해결하고 있는 것으로 확인이 되었습니다.

아마도 CORS가 브라우저가 서로 다른 도메인 간의 리소스 요청을 차단하는 정책이기 때문에, Proxy 서버를 통해 클라이언트가 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주려는 것 같았습니다.

 

하지만 저는 Proxy 서버 구축에 대한 지식이나 경험이 부족하기 때문에 다른 방법을 찾아보기로 결정했고,

검색 결과, 이런 프록시 기능을 제공해주는 몇몇 온라인 서비스가 있었으며, 그 중 하나가 바로 오늘 소개할 CORS anywhere입니다.

 

문제 해결 with CORS anywhere

 

해결 방법은 아주 간단합니다.

 

우선 해당 링크(https://cors-anywhere.herokuapp.com/corsdemo)에 들어가서,

 "Request temporary access to the demo server" 버튼을 클릭한 후 vscode로 돌아와서

 

요청 주소 앞에 "https://cors-anywhere.herokuapp.com/"을 추가해주면 됩니다.

 

 

모든 작업을 끝마쳤다면, 콘솔을 통해 통신에 성공한 것을 확인할 수 있습니다.

 

마무리

CORS 에러가 발생하는 바람에 많이 당황 했었는데, 이렇게 프록시 서비스를 통해서 간단하게 CORS를 해결할 수 있어 너무 편리했습니다.

하지만 요청 속도가 살짝 느리기도 하고 불편한 점이 있어서 시간이 된다면 직접 프록시 서버를 공부하여 구축해보고 싶습니다!