CORS | Notion

처음 웹개발을 하다보면 반드시 마주치는 에러가 바로 CORS다. 뭔지 한번 확인해보자.

Untitled

CORS란?

<aside> 💡 Cross-Origin Resource Sharing, 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

위키백과

</aside>

교차 출처? 자원 공유? 무슨 말인지 모르겠다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. - MDN

MDN이 조금 더 자세히 알려준다. ~~한번 CORS를 삽질해보자.~~

CORS 등장 배경

예전에 웹사이트를 만들때는 대부분 하나의 서버에서 브라우저의 모든 요청을 처리했지만 점점 웹사이트에서 할수있는 일이 많아졌다. (ex 날씨 api 를 이용하여 기능을 넣으려고 할때)

그러나 웹브라우저와 날씨 api 도메인이 서로 달라서 요청을 주고받을 수 없기 때문에, 이를 해결하기 위한 JSONP 라는 방식이 있었다. <script> 요소는 외부 출처로부터 조회된 내용을 실행하는 것이 허용되므로 서버에서 데이터를 반환하는 용도로 사용하는 것이다.

// 함수이름을 넣어 요청
const script = document.createElement("script");
script.src = "ingg.com/test.json?callback=parseResponse";

// 서버에서는 함수이름을 넣고 매개변수로 데이터를 넣어서 반환
parseResponse({
  id: "123",
  name: "ingg",
});

function parseResponse(data) {
  // ...
}

cors가 나오기 전까지 사용 되던 방식이며, 현재는 보안상의 이슈로 거의 사용하지 않는다.

출처? Origin?

우리가 어떤 사이트를 접속할 때 인터넷 주소창에 우리는 URL이라는 문자열을 통해 접근한다.

이처럼 URL은 https://domain.com:3000/user?query=name&page=1 과 같이 하나의 문자열과 같지만 사실은 다음과 같이 여러 개의 구성 요소로 이루어져 있다.

Untitled