CORS 에러 및 해결

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

개인 프로젝트를 진행하던 중 위와 같은 에러가 발생되었다. 자바스크립트에 fetch를 사용해 웹 페이지에 있는 데이터를 가져오고 싶었으나, 에러가 발생한 것이다.

🕵️‍♀️CORS 란?


우선 저 오류를 처리하기 전에 CORS가 뭔지부터 찾아봤다. Cross-Origin Resource Sharing의 줄임말로 다른 출처의 리소스 공유라는 뜻으로 SOP를 우회하기 위한 방법이다. 즉, CORS 에러는 서로 다른 Origin(웹 어플리케이션)에서 리소스에 접근할 때 정책에 위반되어 발생한 것이다. 예를 들면 naver.com 에서 google.com에 있는 resourse에 접근하는 경우이다.

---

💬 Origin은 protocol+host+port 이다.

---

✍ SOP(동일 출처 정책)
알 수 없는 출처에서 불러온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 위에 CORS 에러는 SOP에 위반 되기 때문에 발생한 것이다.

---

✍ 해결

// 기존 CORS 에러 발생한 코드
async function getData(){
    const response = await fetch("https://velog.io/@aydenote");
    console.log(response);
}
getData()

// 해결된 코드
async function getData(){
    const response = await fetch("https://cors-anywhere.herokuapp.com/https://velog.io/@aydenote");
    console.log(response);
}
getData()

fetch(url) 에 https://cors-anywhere.herokuapp.com/ 를 붙여넣어 해결되었으며, 클라이언트와 서버가 1:1 로 통신하는 것이 아니라, 중간서버를 거쳐서 보내는 방법이다.
다만, 큰 프로젝트나 현업에서 사용하는 방법은 아닌 것 같다.