Node.js + Express 웹서버에서 CORS 이슈해결
Node.js + Express로 웹서버를 만들어 웹사이트 운영시 다른 출처의 자원에 접근하려면 보안상의 이유로 CORS 이슈가 발생하게 됩니다. 이번시간에는 이전 포스팅에 이어 CORS 이슈해결에 대한 포스팅을 진행해 보도록 하겠습니다.
CORS(Cross-Origin Resource Sharing)란?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 HTTP 헤더를 사용하여, 각 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 cross-origin HTTP HTTP 요청을 실행합니다. 한 예로 https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우 cross-origin HTTP 요청이 됩니다.
이때 브라우저는 보안 상의 이유로 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.
즉, 기존에는 보안상의 이유로 XMLHttpRequest가 자신과 동일한 도메인으로만 HTTP 요청을 보내도록 제한하였으나 CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. 최신 브라우저는 XMLHttpRequest 또는 Fetch 와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화합니다.
서버에서 CORS 이슈를 해결하는 방법에 대해 알아보도록 하겠습니다.
1. Simple Request인 경우
- HTTP Method가 GET, POST, HEAD 중 하나이거나
- Content-Type이 text/plain, application/x-www-form-urlencoded, multipart/form-data 중 하나일때
어떤 특정 요청에만 적용 하고 싶다면 cross-origin을 허락하는 헤더를 추가해 문제를 해결할 수 있습니다.
|
app.get('/', function(req, res) {
res.header("Access-Control-Allow-Origin", "*");
.....
})
|
2. 미들웨어 cors 사용
미들웨어 cors를 활용하여 해결 할 수 있습니다.
| 명령어 : npm install cors |
cors모듈을 사용하기 위해서는 app.js에 아래와 같이 코드를 추가해줍니다.
|
//cors 모듈을 불러옵니다.
var cors = require('cors');
//cors설정
app.use(cors());
|
cors 옵션을 사용할 경우
|
var corsOptions = {
origin: function(origin, callback) {
var issafesitelisted = safesitelist.indexOf(origin) !== -1;
callback(null, issafesitelisted);
},
credentials: true
}
//cors에 옵션사용할경우
app.use(cors(corsOptions));
|
app.js 전체 소스를는 아래와 같습니다.
|
// node_modules의 express 패키지를 가져온다.
var express = require('express')
//cors 모듈을 불러옵니다.
var cors = require('cors');
//app이라는 변수에 express 함수의 변환 값을 저장한다.
var app = express()
var corsOptions = {
origin: function(origin, callback) {
var issafesitelisted = safesitelist.indexOf(origin) !== -1;
callback(null, issafesitelisted);
},
credentials: true
}
//cors설정
app.use(cors());
//cors에 옵션사용할경우
//app.use(cors(corsOptions));
//환경변수에서 port를 가져온다. 환경변수가 없을시 5050포트를 지정한다.
var port = app.listen(process.env.PORT || 5050);
//REST API의 한가지 종류인 GET 리퀘스트를 정의하는 부분입니다.
//app.get이라고 작성했기 때문에 get 요청으로 정의가 되고
//app.post로 작성할 경우 post 요청으로 정의가 됩니다.
//REST API의 종류 (get, post, update, delete 등등)을 사용하여 End Point를 작성하실 수 있습니다.
app.get('/', function(req, res) {
res.send("<h1>Express server Start</h1>")
})
// express 서버를 실행할 때 필요한 포트 정의 및 실행 시 callback 함수를 받습니다
app.listen(port, function() {
console.log('start! express server');
})
|
여기까지 Node.js + Express 웹서버에서 CORS 이슈에 대한 포스팅을 마치도록 하겠습니다.
참고사이트
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
교차 출처 리소스 공유 (CORS) - HTTP | MDN
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라
developer.mozilla.org