CORS란
프론트엔드와 백엔드 간 통신을 하다 보면 콘솔창에 CORS 에러라고 뜨면서 통신이 되지 않을 때가 있습니다.
CORS는 Cross Origin Resource Sharing의 약자로, 현재 도메인과 다른 도메인으로 리소스를 요청하는 경우를 뜻합니다.
포트 번호까지 구분하기 때문에, http://127.0.0.1:3000 에서 http://localhost:8000 로 요청을 보낼 때도 CORS로 간주합니다.
브라우저는 보안 정책 상 기본적으로 CORS를 허용해 주지 않는데, Node.js + Express로 개발할 경우 cors 미들웨어를 설치하여 간단하게 요청을 허용해 줄 수 있습니다. 😃
cors 설치
$npm install cors // or yarn add cors타입스크립트를 사용한다면 추가로 타입 지정을 위한 @types/cors 도 설치해 줍니다.
$npm install --save-dev @types/cors모든 cors 요청 활성화
// index.ts
import express from 'express';
const cors = require('cors');
// Express 인스턴스 생성
const app = express();
app.use(cors());모든 cors 요청을 활성화할 경우, 다음과 같이 간단하게 cors 미들웨어를 불러와서 app.use() 인자에 넘겨주는 것으로 간단하게 사용할 수 있습니다.
라우터별 cors 옵션 활성화
//routes/home.ts
import { Router, Request, Response } from 'express';
const cors = require('cors');
const router = Router();
/** FUNCTION get 메소드 요청하면 실행
* method: get
* host:port
* */
router.get('/', cors(), (req: Request, res: Response) => {
const dummy = {
msg: 'Hello world',
data: 200
}
res.json(dummy);
});
router.post('/insert', (req: Request, res: Response) => {
const dummy = {
data: 200
}
res.json(dummy);
});
module.exports = router;router나 특정 요청에 따라 cors 옵션을 다르게 하고 싶다면 다음과 같이 사용할 수 있습니다.
저는 라우터를 파일별로 만들어 놓아 위와 같이 사용하였는데, 공식 문서에서 소개하는 코드는 아래와 같습니다.👾
var express = require('express')
var cors = require('cors')
var app = express()
app.get('/products/:id', cors(), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for a Single Route'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})cors 옵션 설정
var express = require('express')
var cors = require('cors')
var app = express()
var corsOptions = {
origin: 'http://example.com',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for only example.com.'})
})cors() 의 인자로 origin, methods, credentials, optionsSuccessStatus 등의 옵션을 설정해 줄 수 있습니다.
특정 url에서 요청했을 때만 cors 허용하기
// cors/index.ts
import cors from 'cors';
// 허용 url
const whitelist = ["http://localhost:3000", "http://localhost:8000","http://127.0.0.1:3000", "http://127.0.0.1:8000"];
// 옵션
const corsOptions : cors.CorsOptions = {
origin: whitelist,
credentials: true,
optionsSuccessStatus: 200
}
export default corsOptions;- origin:
Access-Control-Allow-Origin을 설정하는 옵션으로, cors를 허용할 url을 배열에 담아 특정 url 주소에서만 cors 옵션을 허용하도록 설정할 수 있습니다.
*와일드카드를 사용하면 모든 cors 요청을 허용합니다.
- credentials: 다른 도메인에 요청을 보낼때 인증정보를 담아 보낼지 결정할 수 있는 옵션으로, HTTP 쿠키 허용, AJAX 요청 허용 등에 사용합니다.
origin설정을*로 설정하면 credentials 옵션을 true로 설정해도 영향을 받지 않습니다.
// index.ts
import express, { Express, Request, Response, NextFunction } from 'express';
import dotenv from 'dotenv';
import corsOptions from './cors';
const indexRouter = require('./routes/index');
const cors = require('cors');
dotenv.config();
// Express 인스턴스 생성
const app = express();
const port = process.env.PORT;
app.use(cors(corsOptions));
app.use('/', indexRouter);
app.use(function (req, res, next) {
res.setHeader("Content-Type", "application/json");
next();
});
/** 클라이언트 요청 body를 json으로 파싱 처리 */
app.use(
express.json({
limit: '50mb',
})
);
// start run server
app.listen(port, () => {
console.log(`server is running at port ${port}`);
});저는 cors 설정, 라우터를 다른 파일로 분리하여 작성하였고 index.ts(혹은 app.ts) 의 전체 코드는 위와 같습니다.👻
참고자료
- https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy (Same-origin policy)
- https://expressjs.com/en/resources/middleware/cors.html (Express cors middleware)
- https://medium.com/zero-equals-false/using-cors-in-express-cac7e29b005b (Using CORS in Express)
- https://beagle-dev.tistory.com/194 (node.js express에서 CORS 허용하기)
