HTTP 보안 메커니즘 - CORS (Cross-Origin Resource Sharing)

 

| CORS (Cross-Origin Resource Sharing)

다른 출처(origin) 간의 자원 요청을 허용할지 말지를 웹 브라우저가 판단하도록 도와주는 HTTP 보안 메커니즘으로 Express용 미들웨어이다.

 

브라우저는 보안상의 이유로, 웹 페이지가 **다른 도메인(Origin)**의 서버에 요청하는 것을 기본적으로 차단한다.

 

예를들어,

프론트엔드 주소 : http://localhost:3000
백엔드 주소 : http://localhost:5000

이 둘은 "포트 번호가 다르므로" 다른 origin 으로 간주되고 요청을 보내면 브라우저가 CORS 정책 위반으로 에러를 일으킨다.

(Origin : 프로토콜 + 도메인 + 포트번호 조합)

 

해결방법은 백엔드에서 허용을 해주는 것이다.

 

 

 

| CORS설치

npm install cors

 

처음 백엔드 설치 작업할 때 기본적으로 설치해주면 편리하다. 

 

 

| 요청 허용

server.js에 아래 코드를 넣으면 origin의 요청을 허용한다는 것이다.

 

const cors = require('cors');
app.use(cors());

 

 

| 특정 Origin만 허용

 

보통 로그인 인증이 필요한 상황(쿠키 등)에서 사용된다.

app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

 

 

CORS는 프론트엔드와 백엔드가 다른 포트, 다른 도메인에 있을때 필요하고 API 요청이 발생하는 경우 꼭 필요하다.