CORS(Cross Origin Resource Sharing) 소개

웹 개발 실습에서 웹 앱이 프런트 엔드를 백 엔드 서비스와 분리하는 것이 일반적입니다. 따라서 백엔드에서 리소스에 액세스하려면 Cross-Origin Resource Sharing 또는 줄여서 CORS에 대한 이해가 필요합니다. 개발자를 위한 웹 인프라를 이해하는 데 필수적인 부분입니다.

여러분, 안녕하세요! 이 기사에서는 CORS, CORS가 필요한 이유 및 구현 방법에 대해 설명합니다. 또한 Same-Origin Policy와 같은 관련 개념도 살펴보겠습니다.

첫째, 실험

웹 사이트(예: Google)에 있는 경우 브라우저 검사기에서 다음과 같은 API에 요청을 보내려고 합니다.

const response = await fetch("https://tea-api-vic-lo.herokuapp.com/tea);

어떻게 될 것 같나요?

콘솔은 다음 오류 메시지를 반환합니다.



왜 그렇습니까? 대답은 동일 출처 정책 때문입니다.

동일 출처 정책

브라우저가 따르는 보안 정책이 있습니다. 이를 Same-Origin 정책이라고 하며 기본적으로 동일한 도메인, 호스트 및 포트의 리소스만 서로 상호 작용할 수 있다고 명시합니다.

예를 들어 example.com는 동일한 도메인을 공유하기 때문에 example.com의 서버에서 데이터를 검색할 수 있습니다. 모든 하위 도메인에도 액세스할 수 있습니다(예: example.com/page1 또는 example.com/page1/page2 ).

그러나 api.example.com 또는 google.ca와 같은 도메인의 리소스는 이 보안 정책으로 인해 example.com에 액세스할 수 없습니다.

동일 출처 정책의 중요성

짐작하셨겠지만 이 정책은 보안을 위해 마련되었습니다. 그러한 제한이 없다고 상상해 보십시오. 악의적인 사이트는 사이트 간 요청 위조(CSRF) 공격의 결과로 모든 사이트에서 데이터를 얻을 수 있습니다.

반면에 일부 웹 앱은 여러 다른 서버에서 리소스를 가져와야 할 수 있으므로 이 정책은 너무 제한적일 수 있습니다. 이 경우 CORS(Cross-Origin Resource Sharing)가 등장합니다.

CORS가 무엇인가요?

이름에서 알 수 있듯이 도메인, 호스트 또는 포트를 공유하지 않는 서버에서 웹사이트가 리소스에 액세스할 수 있습니다. 허용 목록에 있는 웹 사이트는 일반적으로 Access-Control-Allow-Origin 요청 헤더에 전달되어 서버에 데이터를 이 웹 사이트로 보내고 공유할 수 있음을 알립니다.

예를 들어 Access-Control-Allow-Origin를 example.com로 설정하면 이 웹 사이트가 이제 api.example.com에 액세스할 수 있음을 의미합니다.

예

앱이 API 데이터에 액세스할 수 있도록 myTea App에서 데이터를 가져오는 MyTea API를 허용 목록에 추가해야 합니다. 이를 달성하기 위해 CORS 미들웨어를 구현해 봅시다.

1단계: 코어 설치

먼저 cors 이라는 npm 패키지를 설치해 보겠습니다.

npm install cors

2단계: 가져오기

server.js 파일에서 cors를 가져옵니다.

const cors = require("cors");

3단계: 화이트리스트

그런 다음 앱 초기화const app = express() 줄 아래에 다음을 추가합니다.

app.use(cors({ origin: /(.*\.)?victoria-lo.github\.io.*/ }));

이 줄은 기본적으로 API에 victoria-lo.github.io가 있는 모든 도메인이 Same-Origin 정책에서 허용 목록에 있음을 알려줍니다. 따라서 victoria-lo.github.io/Hashtag-TEA에서 호스팅되는 내 앱은 완전히 다른 도메인( tea-api-vic-lo.herokuapp.com/ )에 있는 내 API에서 데이터를 가져오고 로드할 수 있습니다.

결론

이것이 바로 CORS의 핵심입니다! 읽어 주셔서 감사합니다. 좋아요를 남겨주시고 아래 댓글에 여러분의 생각을 공유해주세요. 도움이 되는 글이 되었기를 바랍니다. 아래 참조 섹션에서 오늘 논의한 내용에 대해 자세히 읽어보십시오. 건배!

또한보십시오

이미지 출처: haproxy.com

About Cross-Site Request Forgery

npm cors documentation

More about CORS from MDN Docs