cors

 

목차
1. CORS란?
2. 출처 확인
3. CORS 설정하기
4. 예제

1. CORS란?

• Cross Origin Resource Sharing
• 서로 다른 도메인, 프로토콜, 포트 간에 데이터를 공유하는 것을 제어하는 브라우저 보안 정책

네트워크를 통해 클라이언트가 서버에 요청을 할 때 서버 입장에서는 클라이언트가 악의를 갖고 있는지 알 수 없다. 그래서 서버와 동일한 출처를 제외하고 이외에는 접근을 허용하지 않는다. 이 때 동일하지 않는 출처를 Cross Origin이라고 한다.

2. 출처 확인

그렇다면 서버는 요청이 왔을 때 출처를 어떻게 확인할까? 클라이언트에서 요청을 할 때 본 요청 전에 출처에 대해  허용이 됐는지 확인하는 사전 요청을 하게 되는데 이를 Preflight Requests라고 한다.

정책 상 허용이 되지 않았다면 브라우저에서는 에러를 발생시키고 되었다면 본 요청이 진행된다.

 

3. CORS설정하기 

cors를 설절하기 전에 어떤 것을 설정해주어야하는지 알아보자

Access-Control-Allow-Origin	서버 응답에서 허용할 출처
Access-Control-Allow-Methods	허용할 요청의 HTTP 메서드
Access-Control-Allow-Credentials	쿠키나 세션등 자격증명에 관한 정보를 포함

cors는 외부 라이브러리로 npm을 통해 설치해주어야한다.

npm install cors

설치한 라이브러리를 코드에서 가져와 미들웨어로 추가한다.

const express = require("express");
const cors= require("cors");
const app = express();

app.use(cors({
    origin : "허용할 출처",// 여러 출처 설정시 배열로 추가
    methods : "허용할 메서드",
    credentials : true|false // 자격증명 허용으로 true는 허영, false는 불가
}));

4. 예제

cors정책에 따라 브라우저에서 어떤 결과를 출력하는지 예를 통해 알아보도록 하자.

 

설정된 cross origin이 다를 때 

요청을 받은 서버에서 요청을 한 서버의 출처가 설정되지 않았을 때 브라우저에서 해당 출처가 허가가 되지 않았다는 에러를 발생시킨다.

 

설정된 cross origin이 맞을 때 

프론트 서버에서 백앤드 서버로 요청을 할 때 출처가 맞다면 정상적으로 응답 메시지인 "response data"라는 문자열이 뜨는 것을 볼 수 있다.

 

따라서 서로 출처가 다른 두 서버가 통신을 하기 위해서는 반드시 cors를 설정해주어야 한다.