Node.js - CORS(Cross-Origin Resource Sharing)이란?

CORS란

node.js와 express를 사용하여 개발을 진행하던 도중

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://~~ 

이란 에러를 접하게 되었다. 처음엔 무슨 에러인가 싶었지만 조금 찾아보니 cors정책에 걸려서 그런 것이었다.

• cors란 특정 헤더를 통해서 브라우저에게 한 출처(origin) 에서 실행되고 있는 웹 애플리케이션이 다른 출처(cross-origin)에 원하는 리소스에 접근할 수 있는 권한이 있는지 없는지를 알려주는 매커니즘이다. Scheme(프로토콜), host(도메인), 포트중 하나라도 다르다면 cross-origin으로 분류되어 http접근에 대해서는 제한을 당하게 된다.

 

---

CORS 에러 해결 방법?

 

1. 웹 브라우저 실행 시 외부 요청을 허용하는 옵션을 사용해서 회피하는 방법

크롬이나 사파리 같은 웹 브라우저를 실해할 때 Command-Line 옵션을 통해서 Cross-Origin 서버로부터 받아온 리소스에 접근이 가능하도록 설정할 수 있다. 예컨데 크롬의 경우는 --disable-web-security 라는 명령어를 사용해서 실행하면 Cross-Origin 서버로부터 받아온 리소스에 접근이 가능하게 된다. 번외로 --disable-web-security 라는 명령어는 보안을 완전 무시하라는 명령어 같다. 사실 많은 사람들이 CORS를 보안적 매커니즘에 의해서 탄생했다고 생각하는데, 사실은 CORS는 보안에 반하는 정책이다.

 

2. 웹 브라우저에 외부 요청을 허용하도록 하는 플러그인을 설치하는 방법

서버로부터 응답받은 헤더에 "Access-Controller-Allow-Origin: *" 만 추가해주면 웹 브라우저는 Cross-Origin 서버로부터 받아온 리소스에 접근이 가능한 것이라고 판단한다. 이러한 작업을 플러그인을 통해서 서버 응답 헤더에 강제적으로 넣어줄 수 있는데, 대표적으로 구글 웹스토어에 Allow-Controll-Allow-Origin 플러그인이 있다.

 

3. JSONP로 요청하는 방법

js나 css 같은 리소스들은 Cross-Origin 정책을 따르기 때문에 외부 요청이 가능하다. 

 

---

 

• CORS의 기본적인 동작은 서버가 한 origin으로부터 요청을 받게되면 응답할 때 HTTP 헤더에 특정 헤더를 추가함으로써 브라우저는 이 origin이 특정 리소스를 읽을 수 있는 권한이 있는지 없는지를 알게 된다. 추가적으로 HTTP 메소드들 중 GET 이 외의 메소드나, POST 메소드에서 특정 MIME Type은 서버 데이터에 사이드 이펙트를 발생시킬 수 있기 때문에 기본적으로 브라우저는 Preflight Request 방식으로 요청할 수 있도록 규제한다.

 

CORS의 동작 방식에는 총 3가지가 있는데 이는 다음번에 시간이 되면 다루도록 하겠다.

 

1. Simple Requests

2. Preflighted Requests

3. Requests with credentials