CORS 에러가 발생하는 과정

📌  개요

웹 개발을 하다 보면 CORS는 정말 많이 만난다. 이번 기회에 공부 제대로 하고 넘어가야겠다.

CORS

 

✅ CORS 정책이란?

우리가 만나는 CORS 에러는 CORS라는 정책을 위반했기 때문에 나오는 에러이다. CORS는 Cross Origin Resource Sharing의 약자이다. 각 단어를 이해하면 CORS가 무엇인지 알 수 있다.

✨Resource Sharing

 웹 개발을 하다보면 브라우저와 서버가 많은 자원들을 요청, 응답하는 것을 볼 수 있다. html, css, js 파일, 회원 정보 등이 모두 리소스(Resource)이다. 브라우저가 html, css, js파일이 필요하다면 프론트 서버에 요청을 하고 응답을 받아야한다. 즉 브라우저는 리소스를 공유(Sharing)받기 위해 Http 요청 응답을 활용하는 것이다. 

✨Cross Origin

여기서 Origin 은 직역하면 리소스의 출처를 말한다. 인터넷에서는 URL(Uniform Resource Location)을 통해 리소스의 위치를 표시한다. URL은 여러 구성 요소로 쪼갤 수 있는데, 여기서 프로토콜(Protocol) + 호스트(Host) + 포트(Port) 를 합쳐서 Origin 이라고 부른다. React로 개발을 하면 보통 'http://localhost:3000/~'로 화면을 확인하는데, 이때 http://localhost:3000가 Origin이다. http 프로토콜을 사용하고 localhost라는 호스트에 3000번 포트라는 의미이다.

 

 지금까지 내용을 정리하면 각 리소스는 자신만의 Origin 을 갖고 있고 이 리소스를 공유받기 위해 브라우저는 서버에 요청하고 응답을 받는다는 것이다. Cross Origin은 리소스의 Origin이 서로 다르다는 의미이다. 브라우저는 현재 URL의 Origin을 자신의 Origin으로 갖는다. 만약 지금 URL이 'http://localhost:3000/~' 이라면 현재 브라우저의 Origin은 http://localhost:3000 이다. 이때 리소스의 Origin이 브라우저의 Origin과 다르다면 Cross Origin에 리소스를 요청한 상황인 것이다. 

 

✨CORS 에러 발생

 웹 개발에서 CORS 에러를 많이 보는 이유를 알 수 있다. React, Spring으로 모두 로컬 개발을 한다고 가정하자. 그렇다면 브라우저는 http://localhost:3000를 origin으로 갖고, 백엔드는 http://localhost:8080을 origin으로 가진다. 이때 포트 번호가 3000, 8080으로 다르기 때문에 서로 다른 Origin이다. API를 요청하는 상황은 브라우저가 Cross Origin에 Resource Sharing을 요청하는 과정이므로 CORS 정책이 작동한다. 이 정책을 위반하면 그 유명한 CORS 에러를 맞게 된다. 

 

✅ CORS  에러 발생 원리

좌: http 요청, 우: http응답

 

CORS에러는 CORS 정책을 위반할 때 발생한다. 그럼 위반했다는 것을 어떻게 알 수 있을까? 

 

http://localhost:3000에서 http://localhost:8080/hello로 Http 요청을 보내는 상황을 가정해보자.

브라우저는 요청을 보낼 때 Http 요청 header에 Origin 을 담아보낸다. 그리고 서버에서 응답을 보낼 때 Http 응답 헤더에 Access-Control-Allow-Origin 필드를 적어서 보내준다. Access-Control-Allow-Origin은 현재 요청한 리소스가 허용된 Origin을 의미한다. 백엔드에서 @CrossOrigin(origins = "http://localhost:3000") 을 설정해 두었다. @CrossOrigin은 허용할 origin을 설정할 수 있는 어노테이션이다. 이 어노테이션 때문에 응답 header에 Access-Control-Allow-Origin으로 "http://localhost:3000"이 설정되어있다. 브라우저는 요청시 origin과 응답에 있는 Access-Control-Allow-Origin을 비교하여 이 둘이 다르다면 Cors 에러를 발생시키는 것이다. 최종 판단을 브라우저가 하기 때문에 Postman으로 API 요청을 하거나 Next.js를 활용하여 요청한다면 CORS에러는 발생하지 않는다.

 

구체적으로 simple request가 아니면 preflight를 통해 Cors에러를 발생시키고, 인증 정보를 보낼 때는 좀 더 엄격한 기준으로 Cors정책 검사를 하는 경우도 있다. 이 경우도 나중에 다뤄봐야겠다.

 

✅ 참고자료

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

CORS는 왜 이렇게 우리를 힘들게 하는걸까?