CORS란?
CORS는 Cross-orign Resource Sharing 의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석 할 수 있습니다.
한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근 할 수 있는 권한을 부여하도록 브라우져에게 알려주는 체제입니다.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
여기서 잠시 출처란 무엇인지 알아보겠습니다.
출처
출처는 도메인, 프로토콜, 포트 나누어 집니다.
도메인
도메인은 식별하기 어려운 IP주소(192.x.x.x) 를 example.com 처럼 기억하기 쉽게 만들어주는 호스트 이름을 의미합니다.
IP는 인터넷에 연결되어 있는 장치들은 각각 장치를 식별 할 수 있는
192.168.0.1 등의 주소를 말합니다. (컴퓨터, 스마트폰, 타블릿, 서버 등등)프로토콜
프로토콜은 상호 간에 정의한 규칙을 의미하고 특정 기기 간에 데이터를 주고 받기 위해 정의 되었습니다.
브라우져와 서버 간에 데이터를 주고 받기 위한 방식으로 HTTP 프로토콜을 사용합니다.
포트
포트는 네트워크 상에서 컴퓨터와 컴퓨터가 연결되는 통로라고 생각하시면 됩니다.
아래의 URL 을 보시면 http 는 프로토콜, www.example.com 은 도메인 or 호스트 , :1234 는 port 입니다.
http://www.example.com:1234다시 CORS 에 대해 알아 보겠습니다.
한 출처에서 다른 출처로 자원을 요청할 때 cross-origin HTTP에 의해 요청이 되는데,
동일 출처 정책(Same-origin policy) 때문에 CORS 상황이 발생하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다.
즉 localhost:3000 에서 localhost:8000 자원 요청을 할 경우 출처가 다르기 때문에 동일 출처 정책 (Same-origin policy)에 의해 오류가 발생 하는 겁니다.
이를 해결하기 위한 방법은 응답을 주는 출처에서 Cross-origin HTTP 요청을 허가해 주면 됩니다.
허가 방법에는
Access-Control-Allow-Origin response 헤더를 추가 해주면 해결 할수 있습니다.
예시로 Node.js를 통해 CORS 설정을 한다면 아래와 같습니다.
방법1) 헤더 추가
app.get('/', (req, res) =>{
res.header("Access-Control-Allow-Origin", "*");
});방법2) CORS 미들웨어
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); 이처럼 모든 출처에 대해 허용을 할수 있습니다.
하지만 보안적으로 취약 할수 있기 때문에 설정을 해줘야 합니다.
app.use(cors({origin: 허용 오리진 주소})) 여기까지 CORS 에 대해 알아보았습니다.
