[node.js]CORS 란 ?

어제 호키스 블로그 게시글에 대한 정보를 elasticsearch로 넘겨주는 작업을 하기 위해서 axios로 내 ip로 post방식으로 보내도록 설계하였는데, 난생 처음 보는 에러인 cors에러와 406에러가 동시에  콘솔창에 경고를 보내왔다. 

 

406에러는 header를 감싸고 있는 config를 제거 함으로써 쉽게 해결 하였는데, CORS문제를 해결하려고 검색해보니 단순히 기술적으로 해결하고 넘어갈 문제가 아니라 앞으로 내가 개발자가 되고 싶으면 꼭 알아야 하는 상식과 개념이였다. 

 

CORS (cross origin resource sharing)

 

 

CORS는 보안상 문제로 자바스크립트가 HTTP REQUEST를 할 때 본인의 도메인외의 다른 도메인으로 REQUEST하는 것을 제한하는 정책입니다. 다른 서버에게 HTTP 요청을 하는 것을 cross-site http request라고 하는데, 이 Same Origin Policy에 따르면 CSHR은 같은 프로토콜, 호스트, 포트가 같아야지 요청이 가능하다.

 

그래서 외부 API호출,다른 서버에 있는 데이터 호출등이 잦은 지금의 웹 어플리케이션은 이러한 정책들이 조금 불편한데, CORS는 SOP에 의한 다른 도메인 간 통신을 가능케한 일종의 규약서 같은 역할을 한다.

 

 CORS의 종류

CORS는 크게 Simple Request, Preflight Request, Credential Request, Non Credential Request로 나눌 수 있습니다. 

 

Simple Request

 

Simple Request는 가장 기본적인 통신 스펙으로써 다른 도메인과 통신을 하려면 다음과 같은 조건을 만족해야 한다. 

 

메서드는 GET, HEAD, POST 3가지 중 한가지여야 한다. 

 

자동 설정되는 헤더이외의 개발자가 설정할 수 있는 헤더는 다음과 같다 .

 

• Accept, Accept-Language,
• Content-Language,
• Content-Type, DPR,
• Downlink,
• Save-Date,
• Viewport-Width,
• Width

 

Content-Type헤더에 허용되는 값은 다음과 같다.(post 한정)

 

• application/x-www-form-urlencoded,
• multipart/form-data,
• text/plain

MDN에 따르면 만약 서버가 알맞은 헤더를 전송하지 않을 경우 응답 데이터자체가 전달되지 않는다고 한다.

 

PreFlight Request

 

preFlight 사전 요청은 실제 요청이 전송하기에 안전한지 아닌지를 확인하기위해, 다른 도메인에 있는 resource에 option 메서드로 예비요청을 전달한다. 그리고 만약 안전하다고 판단되면 본래의 요청을 보냅니다. 만약 Http 요청의 데이터가 content-type이 simple Request가 아닌 경우 preFlightRequest를 사용해야 한다. 

 

메서드는 PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH 중 한 가지여야 한다.

 

자동 설정되는 헤더이외의 개발자가 설정할 수 있는 헤더는 다음과 같다. 

 

• Accept
• Accept-Language
• Content-Language
• Content-Type
• Dpr
• Downlink
• Save-Data
• Viewport-Width
• Width

preflight 요청의 Content-type헤더는 simple request와 동일하다.

 

Credential Request

 

MDN에 따르면 HTTP쿠키와 HTTP authentication 정보를 알아차리는 인증된 요청을 만든다는 건데, 이말인 즉슨 기존 httpRequest를 요청 했을 때 쿠키에 그 기록이 저장되어, 브라우저는 추후 요청 때 이 쿠키를 보고 http 요청에 필요한 증명을 하지 않아도 되는 듯 합니다. 

 

Credential Request는 Access-Control-Allow-Credentials : true 헤더를 갖고 있지 않다면 요청을 거부합니다. 

 

참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

HTTP 접근 제어 (CORS)

 

https://brownbears.tistory.com/336

CORS