[node.js] CORS

CORS는 Cross-origin resource sharing으로 직역하자면 교차 출처 리소스 공유를 의미합니다. 예를 들어 http://cliel.com에서 API를 서비스하는데 다른 도메인(ex:: https://www.daum.com)에서 cliel.com 서비스에 접근하여 특정 API를 호출해 원하는 데이터를 가져가게 되면 그것이 이 CORS인 것입니다.

 

그런데 사실 위와 같은 동작은 실제로 그대로 적용되지 않습니다. 한쪽에서 다른 쪽으로 API 호출을 시도하면 도메인이 다른 경우 서버가 아닌 웹브라우저에서 보안상 CORS오류를 발생시키기 때문입니다.

 

cliel.com에서 192.168.137.1로 API를 호출하지만 도메인(출처)가 달라 CORS오류를 발생시킨다.

node.js에서 정확히는 웹에서 이러한 문제를 해결하기 위해서는 API호출을 웹페이지에서 하는 게 아니라 서버에서 호출하도록 만들고  그 결과를 같은 도메인의 웹에서 가져오도록 하면 문제가 해결될 수 있습니다.

 

CORS 오류

클라이언트가 아닌 서버에서 API 호출

CORS는 웹브라우저에서 발생시키는 오류이므로 웹브라우저가 아닌 서버에서 직접 프로그램을 통해 API를 호출하는 건 아무런 문제가 되지 않기 때문입니다.

 

하지만 위와 같은 방법으로 해결이 어려운 경우 직접 API서버에서 필요한 작업을 해줘야 하는데 이때는 클라이언트의 Header에 필요한 정보를 추가해 주는 방법을 사용합니다.

router.get('/', async (req, res) => {
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.render('index', { name: 'john' });
});

router.get('/test', async (req, res) => {
	res.sendFile(`${__dirname}/test.html`);
});

사용자가 처음 / 경로로 접근을 시도할때 setHeader() 함수를 통해서 'Access-Control-Allow-Origin'를 설정합니다. 예제에서는 이 설정의 값으로 *을 추가했는데 이것은 모든 클라이언트에서 접근을 허용하겠다는 것을 의미합니다. 만약 특정 도메인에서만 접근을 한정하려면 'https://cliel.com'처럼 지정해 주면 됩니다.

 

경우에 따라 위와 동일한 사유로 쿠키값을 설정하거나 가져올 수 없는 경우도 있는데 이때는 'Access-Control-Allow-Credentials'를 true로 설정해 주면 됩니다.

 

node.js에서 위와 같은 설정은 직접 해줄 수도 있고 아니면 cors모듈을 사용해 처리할 수도 있습니다. cors모듈은 다음 방법으로 설치합니다.

npm i cors

모듈을 설치하고 나서 아래와 같이 cors를 적용해 줍니다.

const express = require('express');

const cors = require('cors');

const router = express.Router();

router.use(cors());

router.get('/', async (req, res) => {
	res.render('index', { name: 'john' });
});

router.get('/test', async (req, res) => {
	res.sendFile(`${__dirname}/test.html`);
});

module.exports = router;

에제는 router에서 적용했지만 cors를 적용하는데 반드시 route일 필요는 없습니다.

 

기본적으로는 cors에서 아무것도 필요로 하지 않지만 조금전 설정했던걸 내용을 그대로 적용하는 것도 가능합니다.

router.use(cors({
	origin: '*'
}));

혹은 origin설정을 true로 하면 요청을 보내는 주소가 자동으로 허용돼 *과 동일한 기능을 하게 됩니다.

router.use(cors({
	origin: true,
	credentials: true
}));

주의할 점은 credentials를 사용하려면 origin설정이 *면 안됩니다. 대신 true값을 사용해야 합니다.