CORS

CORS

WEB

 

CORS MSG

 

프론트엔드 개발자들을 개발환경에서 특히나 괴롭히는 CORS입니다.

분명 통신은 200 즉 성공했다고 환영을 받았으나 위와 같은 에러로 데이터는 줄 수 없다는 브라우저의 메시지였다.

 

CORS는 브라우저의 단속입니다.

 

CORS(Cross-Origin Resource Sharing)는 보안상의 이유로 브라우저가 사용자를 보호하기 위해 발생하는 기능입니다.

 

최초에 리소스를 제공한 출처(origin)와 다른 출처의 리소스를 요청하는 경우 브라우저가 이를 제한합니다.

 

출처란 URL의 scheme(protocol), host(domain), port로 이루어진 값으로, 두 origin이 같다는 것은 URL의 scheme과 host, port가 모두 같음을 의미합니다. 예를 들어, 프론트의 localhost:3000과 서버의 localhost:8000은 서로 다른 포트를 사용하므로 CORS가 발생할 수 있습니다.

동일 출처 정책 

동일 출처 정책(Same-Origin Policy)은 웹 보안의 핵심 요소입니다.

다른 출처로부터 조회된 자원들의 읽기 접근을 막아 다른 출처 공격을 예방할 수 있으며 이것은 웹 애플리케이션의 안전성을 보장하기 위한 중요한 보안 메커니즘으로 사용자의 개인 정보와 데이터를 보호하는 데 중요한 역할을 합니다..

 

최신 브라우저들은 동일 출처 정책을 일정한 규칙에 따라 구현하고 있으나 명세는 명확하게 정의되어 있지는 않습니다.

 

이러한 정책은 SPA(Single Page Application) 및 미디어 중심 웹 사이트의 증가와 함께 계속 발전하고 있으며, 다른 출처 리소스에 대한 접근성을 증가시키기 위한 노력이 계속되고 있습니다.

 

이러한 상황에서 CORS(Cross-Origin Resource Sharing)가 등장하게 되었습니다. CORS는 다른 출처에서의 리소스 요청을 보다 유연하게 다루기 위한 체제로, 클라이언트와 서버 간의 출처가 같은지 여부에 따라 동일 출처 요청과 다른 출처 요청을 구분합니다. 이를 통해 기본적으로는 동일 출처 요청만이 허용되는 동일 출처 정책을 완화하여 다른 출처 요청도 허용할 수 있도록 하는 기준 마련되었습니다.. 이러한 접근은 웹 애플리케이션의 유연성과 상호 연동성을 확보하면서도 보안을 유지하는 데 중요한 역할을 합니다.

Same Origin Policy

Pre - Flight

프리 플라이트(Pre-flight)는 CORS(Cross-Origin Resource Sharing)에서 사용되는 메커니즘 중 하나로, 실제 요청을 전송하기 전에 먼저 OPTIONS 메서드로 HTTP 요청을 보내어 안전성을 확인하는 과정을 말합니다.

 

이는 다른 출처 요청이 유저 데이터에 영향을 줄 수 있는 경우에 미리 전송하여 안전성을 검증하는 것을 의미합니다.

 

프리 플라이트 요청의 요청 헤더에는

origin(어디서 요청을 했는지 서버에 알려주는 주소)

access-control-request-method(실제 요청이 보낼 HTTP 메서드)

access-control-request-headers(실제 요청에 포함된 헤더)와 같은 값들이 포함됩니다.

 

이를 통해 서버는 클라이언트의 요청을 사전에 분석하고 허용 여부를 결정할 수 있습니다.

 

또한, 프리 플라이트 요청에 대한 응답 헤더에는

access-control-allow-origin(서버가 허용하는 출처)

access-control-allow-methods(서버가 허용하는 HTTP 메서드 리스트)

access-control-allow-headers(서버가 허용하는 헤더 리스트)

access-control-max-age(프리 플라이트 요청의 응답을 캐시에 저장하는 시간) 등의 값들이 포함됩니다.

 

이를 통해 클라이언트는 서버로부터 받은 응답을 토대로 실제 요청을 전송할 수 있게 됩니다. 프리 플라이트를 통해 클라이언트와 서버 간의 안전한 통신을 보장하며, CORS를 통해 다른 출처 간의 자원 공유를 보다 안전하게 처리할 수 있습니다.

 

CORS 해결 방법

1. 백엔드에게 맡겨보는 방법이 있습니다.

 

내가처음으로 CORS 문제 만났을 때 해결했던 방법이다. 백엔드 개발자에게 CORS 관련 설정에 대해 문의하였고 관련하여 수정 작업 후 다시 통신을 시도해 보니 문제없이 진행되었다.

 

HTTP 응답 헤더에 Access-Control-Allow-Origin: 허용 도메인만 설정을 해주면 나의 도메인은 해결이 된다.

 

CORS를 해결하기 위해서는 백엔드 서버에서 올바른 CORS 헤더를 설정하면된다.

app.get('/data', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");  // 모든 도메인
    res.send(data);
});

HTTP 응답 헤더에 Access-Control-Allow-Origin: 허용 도메인을 설정하면 된다고 한다.

 

2. Proxy 추가

 

클라이언트에서 요청을 보내는 대신 Proxy 서버를 중간에 두고 Proxy 서버가 실제 요청을 보내는 방식으로 CORS를 우회할 수 있습니다. 이를 통해 프록시 서버에서는 CORS 정책을 갖지 않도록 설정하여 문제를 해결할 수 있습니다.

 

바로 중개자를 두는 방법입니다.

브라우저 - Proxy 서버 - 서버

 

하지만 통신의 중간에 길이 하나 더 생기는 것이니 그만큼 속도가 느려질 수 있는 이슈가 있습니다.

 

CORS 너무 귀찮지만 이겨낼 수 있습니다. 백엔드 개발자와 잘 협력해서 헤쳐 나가 보세요~!