CORS란?
CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘이다.
웹이 처음 만들어질 때 브라우저와 서버는 1대1로 매치하는것을 기본으로 하고, 다른 도메인주소에서 들어오는 자료들은 에러처리를 해버렸다. 잠재적으로 해로울 수 있는 문서를 분리해, 공격받을 수 있는 경로를 줄이는 목적이었다.
하지만 이후 사람들이 웹에 다양한 정보를 담기위해 다른서버에서 자료를 요청해야 하는 일이
생겨나기 시작한다. 이때 기존 브라우저의 특성인 동일출처정책(same-origin policy) 때문에
브라우저가 에러를 발생시키는데 아래 모양과 같다.
이를 허가해주는 방법들이다.
1. 헤더추가
app.get('/data', (req, res) => {
res.header(defaultCorsHeaders);
res.send(data);
});
const defaultCorsHeaders = {
"access-control-allow-origin": "*",
"access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
"access-control-allow-headers": "content-type, accept",
"access-control-max-age": 10 // Seconds.
};
//설치 및 사용방법
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // CORS 미들웨어 추가
...
하지만 위 두 방법은 모든 요청에 대해 허가를 하게되기 때문에
보안적으로 취약해 질 수 있다. 그래서 CORS를 제한적으로 사용하는 방법도 알아두면 좋다.
https://www.npmjs.com/package/cors
//사용예시
const corsOptions = {
origin: 'http://localhost:3000', // 허락하고자 하는 요청 주소
credentials: true, // true로 하면 설정한 내용을 response 헤더에 추가 해줍니다.
};
app.use(cors(corsOptions));