FE와 BE 연동 중 발생하는 CORS ERROR

프로젝트 진행 중 EC2 instance에 올려져있는 백엔드 서버를 통해 FE가 Axios를 이용하여 API에 요청을 보냈을 때 자꾸만 브라우저에서 값을 읽어들이지 못하고 CORS policy를 위반한다는 오류 메시지가 발생하였다. 

 

이를 해결하기 위해 CORS가 무엇인지에 대해서 알아보았다. 

CORS(Cross Origin Resource Sharing)

CORS에 대해 얘기하기 전, 우선 SOP에 대해서 알 필요가 있다. 

SOP(Same Origin Policy)란 ?

• 한 origin으로부터 로드된 script나 document가 다른 origin의 리소스와 상호작용 할 수 있는 방법을 제한하는 중요한 보안 메커니즘.

origin을 판단할 때

1. Scheme(HTTP / HTTPS 등)
2. Host
3. Port 3가지가 모두 같아야 same origin이다.

Document가 다른 리소스와 상호작용을 할 때 SOP가 적용 어떤 상호작용?

• API로 부터 JSON데이터를 요청하였을 때
• 새로운 document를 열 때(팝업 차단된 상태)
• Iframe을 사용할 때
• 웹 자체 데이터베이스는 origin마다 하나씩 생성되고, 생성된 DB는 same-origin을 갖는 Document나 script만 접근 가능하다.

SOP가 없으면 생길 수 있는 상황 

1. iframe을 사용할 경우 - 만약 해커가 악의적인 사이트(피싱 사이트) 하나를 만들어서 구글 메일을 가져오려고 요청을 할 경우 SOP가 없으면 이를 허용하여 document에 접근할 수 있는 것이다. -> 이때 SOP가 있었다면 해커의 origin과 구글의 origin이 서로 다르기 때문에 iframe을 이용하여 메일 내용이 로드는 되지만, iframe 내부의 document를 참조할 수가 없다. (NULL이 Return 된다.)

* Same-origin : 상호간의 Document에 자유롭게 접근가능

* Cross-origin : 상호간의 Document에 접근 불가, 매우 제한적 객체에만 접근 가능

 

   2.  XMLHttpRequest를 사용하는 경우 -> 위와 동일

네트워크 API를 통해 다른 서버에 자원을 요청할 때 write(+embed)하는 것은 Same Origin이든 Cross Origin이든 일반적으로 가능하다. (preflight일 때는 write도 할 수 없다.) 단, Read는 일반적으로 Cross origin일 경우 불가 Embedding이 가능하기 때문에 일부 정보가 누출될 가능성도 있다.

• Preflight : 실제 요청을 보내기 전에 서비스에 대한 CORS(원본 간 리소스 공유) 규칙을 쿼리한다. => CSRF(Cross Site Request Forgery) 문제가 발생할 수 있음.

Cross origin간의 API를 통해 데이터를 읽어들어야할 경우?

Access-Control-Allow-Origin header에 이 데이터를 읽을 수 있는 origin을 따로 넣어준다. (단, 허용할 origin만 추가하여 사용해야한다.) 혹은 JSONP를 이용하는 방법도 있는데, 이는 모든 origin에 대해 SOP를 무력화시키기 때문에 사용하면 안된다.

다른 Origin 요청을 보낼 때 미리 내 요청을 받을 수 있는지 확인하기 위해서 사전 요청(Preflight Request)을 보낸다. 그러고 나서 가능하면 나의 실제 요청을 보내고 응답을 받는다.

 

이 개념을 통해 FE쪽 Source code를 보았더니 현재 axios를 통해 요청을 보내는 주소의 Scheme, 즉 HTTP, HTTPS가 생략된채 사용되고 있어서 브라우저 상에서 CORS 설정을 해주어도 same origin이라고 판단하지 못하였던 것이 오류였다. 

Spring 상에서는 @CrossOrigin(origin = ??) annotation을 이용하여 해당 controller의 cross origin을 쉽게 설정해줄 수 있는데, 설정 해주더라도 애초에 same origin으로 판단하지 못한다면 계속해서 오류를 발생시키게 된다.

그리하여 주소를 변경해주니 정상적으로 데이터를 받아올 수 있었고, 연동에 있어서 첫 발걸음을 내딛은 것 같아 뿌듯함을 느낄 수 있었다.