CORS(클라이언트와 서버의 오리진이 다를때 발생하는 이슈)

CORS란?

Cross Origin Resources Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘을 말함.

요청 시에는 cross-origin HTTP에 의해 요청되며, 동일 출처 정책(same-origin policy)에 의해 CORS 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저에서 보안목적으로 차단하게 되어 정상적으로 데이터를 받을 수 없게 됨.

 

* 동일 출처 정책 (same-origin policy)

불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 중요한 보안 방식으로 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는 데 도움이 됨.

 

예시)

localhost:3000으로 개발을 진행하며 서버는 locahost:8000으로 실행

const getData = async() => {
  try {
    const serverData = await axios.get('heep://localhost:8000/data');
    return serverData;
  } catch(err) {
    console.error(err);
  }
}

 

해결방법

1. Access-Control-Allow-Origin response를 헤더에 추가

app.get('/data', (req, res) => {
  res.header('Access-Control-Allow-Origin','*');
  res.send(data);
});

모든 클라이언트의 요청에 대한 cross-origin HTTP 요청을 허가하는 헤더를 추가함. 단 rest.api의 모든 응답을 일일히 추가해주기 힘듬.

 

2. node.js의 미들웨어 CORS를 추가

이미 만들어진 node.js의 미들 웨어 CORS를 추가함.

npm install --save cors

yarn add cors

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', // 허락하고자 하는 요청 주소
  credentails: true, // true 설정 시 설정한 내용을 response 헤더에 추가함.
};

app.use(cors(corsOption)); // config 추가

 

요약

• cors이란 도메인 또는 포트가 다른 서버의 자원을 요청하면 발생하는 이슈이다.
• 서버와 클라이언트가 분리되어 있는 앱에서는 cross-origin HTTP 요청을 서버에서 승인해주는 것이 좋다.