[Network] CORS 에러

웹브라우저에는 서버에 어떤 방식으로 자원을 요청하느냐에 따라 적용되는 정책이 있는데, 크게 SOP(Same Origin Policy)와 CORS(Cross Origin Resource Sharing) 두가지로 나뉜다.

 

SOP정책은 같은 출처에서만 리소스를 주고받는 정책인데, 여기서 출처는프로토콜://호스트명:포트 까지를 의미한다.

기본적으로 HTML에서의 요청은 CORS정책을 따르고, fetch, axios 등 스크립트에서 호출하는 요청은 SOP정책을 따른다.

 

예를들어 브라우저(도메인 A)에서 SOP정책을 따르는 fetch API로 서버(도메인 B)로 데이터를 요청하면, 서버로부터 정상적으로 응답을 받더라도 A와 B가 같은 출처가 아니기 때문에 브라우저 선에서 보안상의 이유로 CORS 에러를 뱉는다.

이 에러는 자신의 상황에 맞게 프론트엔드(클라이언트)나 백엔드(서버)에서 처리할 수 있다.

 

1. 백엔드

백엔드에서 응답을 보낼 때, HTTP 헤더에 Access-Control-Allow-Origin: 허용할 출처 를 넣어준다.

 

2. 프론트엔드

백엔드 서버가 내가 만든 서버가 아니면 응답을 마음대로 조작할 수 없기 때문에,

브라우저에서 서버로 요청을 보낼 때 중간에 응답을 가로채서 요청을 허용하게 만드는 프록시 서버를 활용하거나

CORS에러를 우회하는 라이브러리를 사용할 수 있다.