설명
브라우저는 보안을 위해 다른 출처(origin)의 리소스를 마음대로 요청할 수 없도록 제한하게 됨.
이걸 Same-Origin Policy (SOP) 라고 한다.
http://localhost:3000 → 백엔드 서버
http://localhost:3001 → 프론트 서버
이렇게 백엔드와 프론트가 다른 포트로 진행하게되면 차단이 된다.
유저가 로그인 후 N사이트를 이용할 때
B사이트에서 유저의 쿠키로 N사이트에 요청을 보내면 정보를 탈취할 수 있게 된다.
Node.js 같은 백엔드에서는 브라우저 요청을 허용,거부를 서버에서 설정해줘야 함.
CORS는 백엔드에서 막지 않고, 브라우저가 막음.
서버는 (허용) 신호(응답 헤더) 를 보내주는 역할만 하게됨.
// Express 예시
import cors from 'cors';
app.use(cors({
origin: 'http://localhost:3001', // 허용할 포트 주소
credentials: true // 쿠키 포함 시 true
}));
CORS는 보안상의 이유로, 다른 출처의 요청을 허용할 수 있도록 브라우저가 정책을 명시해둔 것이다.
요청이 발생하면 브라우저는 먼저 서버에 이 요청이 허용 가능한지 미리확인을 진행함.