CORS 이해하기 기본 - 왜 발생하니?

 

 

웹 브라우저에서 발생할 수 있는 보안 상의 이유로 CORS 에러 (Cross-Origin Resource Sharing : 다른 오리진간에 리소스 공유) 에러가 발생합니다.

 

주로 프론트엔드 서버와 백엔드서버가 서로 다른 경우 많이 발생하고, React, Vue등 SPA (single page application)으로 프론트를 구현하고 백엔드서버와 api를 통해 데이터를 주고 받으려고 할 때 발생합니다.

 

일단 서버에서 Response header에 Access-Control-Allow-Origin 이라는 헤더를 추가해야 됩니다. 서버에서 이 헤더를 제대로 설정하지 않으면 보안상 이유로 브라우저가 이를 차단하고 CORS에러를 발생시킵니다.

 

네, 서버가 아니라 브라우저가 발생시키는 에러입니다.

 

우선은 서버에서 Response header를 추가해야 이 에러가 해결이 됩니다.

CORS에러가 발생하는 웹페이지 도메인을 (i.e. https://example.com) 백엔드 개발자에게 알려줘서, 서버가 해당 도메인을 허용하도록 수정해야 합니다.

 

다음 컨텐츠 : Django를 사용한 api server에서의 cors 처리