본문 바로가기
Backend/Server

Express 서버, CORS 설정 가이드 | cors

by 신림쥐 2024. 1. 11.
728x90
반응형

Cross-Origin Resource Sharing(CORS)란?

  • 웹 브라우저의 강력한 보안 기능으로, 다른 도메인에 있는 서버의 자원에 접근하려는 요청을 기본적으로 차단하는 정책

 

CORS가 필요한 이유?

  • 브라우저가 아무런 제한 없이 모든 도메인에 접근을 허용한다면, 악의적인 웹사이트가 다른 웹사이트의 데이터를 훔치거나 조작하는 등 심각한 보안 문제가 발생할 수 있기 때문입니다.
  • 예를 들면 https://test1.com의 서비스를 https://test2.com에서 요청하려고 하면 브라우저가 기본적으로 차단하고 있다.
  • 이러한 상황을 해결하기 위해 API를 제공하는 서버에서 Access-Control-Allow-Origin을 설정하여 특정 도메인에서 요청을 허용할 수 있게 할 수 있다.
//  test2.com에서 온 요청만 허용하고, 다른 도메인에서 온 요청은 차단
Access-Control-Allow-Origin: https://test2.com

 

Express 서버 CORS 설정

  • CORS 노드 모듈 설치
npm install cors
  • Express 서버 CORS 설정
const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;
// cors 설정
app.use(cors());
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

 

 

cors 정책 옵션

 
// 모든 출처 허용 (주의: 보안에 취약할 수 있음)
app.use(cors());
// 특정 출처만 허용
app.use(cors({
  origin: 'https://localhost:8002' // 옵션 사용하지 않는 경우 모든 도메인 허용
}));
// 쿠키를 포함한 요청도 허용
app.use(cors({
  credentials: true
}));
// 추가적인 설정
app.use(cors({
  origin: ['https://localhost:8002', 'https://example.com'], // 허용할 출처 배열
  methods: ['GET', 'POST'], // 허용할 HTTP 메서드
  allowedHeaders: ['Content-Type', 'Authorization'], // 허용할 헤더
  credentials: true // 쿠키를 포함한 요청 허용
}));

 

 

728x90
반응형