CORS란 무엇일까?

알게 모르게 cors 에러를 처리하기 위해 Express.js에서 미들웨어를 사용해왔는데

문득 이게 정확히 뭔지 궁금증이 생겼습니다..

 

---

 

CORS는 Cross-Origin Resource Sharing의 약자로, 다른 출처 리소스 공유에 대한 허용/비허용 정책이다

=> 이 정책은 브라우저에서 실행되는 웹 애플리케이션이 다른 출처(Origin)로부터 리소스에 접근할 때 적용됨

 

브라우저는 기본적으로 Same-Origin Policy를 따르며, 이는 스크립트나 스타일 등의 리소스 요청이

동일한 출처에서 온 것이어야 한다는 정책이다.

 

(동일한 출처(Origin)란 프로토콜, 호스트, 포트가 동일한 것을 의미)

 

https://www.naver.com:3000/ 과 같은 URL이 있다면

https가 프로토콜
www.naver.com이 호스트
3000이 포트 (실제 네이버 주소에서는 포트 번호가 생략되어 있고 여기서는 임의로 달아둠)

 

그렇다면 Same-Origin Policy는 필요할까?

 

=> 애플리케이션에 해커가 심어놓은 코드가 실행되어 개인 정보를 가로채는 등

보안 측면에서 Same-Origin Policy가 없는 환경이라면 보안에 굉장히 취약함!

물론 보안 측면이 중요하지만 개발을 하다보면 어쩔 수 없이 다른 출처와 상호작용 해야 하는 경우가 있다

=> CORS는 이 제한을 완화하여, 서로 다른 출처의 웹 애플리케이션이 예외적으로 서로의 리소스에 접근할 수 있게 해줌

 

브라우저의 CORS의 기본적 동작 흐름

 

보통 웹은 HTTP 요청을 통해 서버에 요청을 보내는데 이때 요청 헤더에 Origin이라는 필드에 출처를 담아 보냄

 

=> 응답을 받은 서버는 응답 헤더를 사용하여 허용된 출처를 명시한다

(응답 헤더의 Access-Control-Allow-Origin 필드에 이 리소스를 접근하는 것이 허용된 출처 url을 담아 클라이언트로 전달)

 

이후, 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보낸 응답의 Access-Control-Allow-Origin을 비교함

(차단할지 말지를 결정!)

 

서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하는게 CORS 에러의 해결책!

 

현재 개발중인 Node.js에서 CORS를 해결하기 위해, cors 미들웨어를 사용하는 경우가 많다!

=> cors 미들웨어는 Express 프레임워크와 함께 자주 사용되며, 간단한 설정으로 CORS 관련 이슈를 다룸

 

이 미들웨어를 사용하면 다른 출처에서의 요청도 허용할지, 어떤 HTTP 메서드가 사용 가능한지,

어떤 헤더가 허용되는지 등을 설정할 수 있음

 

결론적으로는 이 미들웨어를 사용하면 브라우저에서의 요청이 허용되도록 헤더를 설정해주는데

 

지금 개발 중인 코드에서는 별다른 옵션 없이 그냥 cors()라고 적혀있는 걸 확인할 수 있다

 

사실 cors()의 괄호 안에는

// 여러 도메인 허용
app.use(cors({ origin: ['http://example.com', 'http://another.com'] }));

 

다음과 같이 요청을 허용할 도메인을 명시해줄 수 있는데

 

위의 작성중인 코드처럼 그냥 cors()를 적어주면 모든 origin에서의 요청을 허용하는 것으로 기본 설정 된다!

 

=> 보안상의 이유로 실제 운영 환경에서는 이를 무작정 허용하는 것보다는

특정 도메인에서의 요청만을 허용하도록 설정하는 것이 일반적이다!!

 

cors() 안에 origin 외에도 methods, allowedHeaders,credentials 등등 여러 옵션들이 존재한다!

=> 궁금하면 잘 정리된 문서를 찾을 수 있음

 

 

이번에 CORS에 대해 알아보며 생각보다 깊게 공부할 부분이 많더라구요...
백엔드 측면에서만 간단하게 요약해 봤는데 더 자세하게 공부를 해보는 것도 좋을 것 같네요!