점핑배틀외주 프로젝트1-Cors에러(백엔드)

Cors의 원인 찾기

우선 flask에서 Cors모듈을 사용하여, 해결하려 하였으나 문제가 해결 되지 않았다.
특정 url과 헤더에 대한 설정을 해주었음에도 다운로드 비디오를 클릭하였을 때에만 Cors가 에러가 발생한다는 것으로 미루어 보아 firebase쪽의 문제일 가능성이 높아보였다.

보안 규칙 확인하기

다운로드 이전의 url을 통한 비디오 스트리밍은 잘 되는 것으로 추정하였을 때 보안 규칙 자체의 문제일 가능성은 낮았으나, 미리 확인을 해주었다.
결과적으로 문제는 여기가 아니었다.

firebaseFunctions의 문제인가

현재 내프로젝트는 일부 파일의 자동삭제를 위하여 firebaseFuctions도 함께 사용하기에 문제의 발생 지점을 파악하기 까다로웠다.
찾아보니, oncall함수는 cors처리를하면 안되고 onRequest에 한하여 cors처리를 해주어야한다는데 내 프로젝트는 ajax를 통한 호출이 아니므로 해당사항이 없었다.

firebaseStorage의 cors문제

내 프로젝트의 cors에러는 해당문제로인하여 발생된것이었다.
그래서 cors.json이라는 파일을 만들어 다운로드를 처리하는 videoProxy가 시행되는 라우터의 주소를 추가해주었다.

왜firebaseStorage에서 cors가 뜨는가

초반에 파이어베이스 스토리지의 문제라고 생각하지 못한 이유 중 하나는 비디오가 재생이 되었기 때문이다.
하지만 현재 내가 flutter에서 사용하는 비디오의 재생 방식은 dart:html의 VideoElement를 직접 만들어서 html처럼 바로재생을 하는 것이다.
이 경우 브라우저 에서는 특정 만료 기간 등이 포함된 SignedUrl만 있어도 안전한 경우로 인식하는 것이다.

Download는 어떻게 작동하는가

우선 내가 만든 함수는 fetch()를 통해 영상 데이터를 요청하고->응답의 여부에 따라 blob를 통한 파싱을 시도하며->이 blob를 다시 a태그의 url로 바꾸어 다운로드를 하는 방식이다.
video태그와 달리 fetch는 cors정책을 요구하기 때문에 다운로드 시에만 문제가 생겼던 것인데 이 둘의 차이를 이해하지 못하여 생각보다 오랜 시간을 허비하였다.

Cors에러란

자 현재 내 프로젝트를 기준으로 하면, videoProxy의 라우터에서 signedUrl을 생성하여 준다.
그런데 이 생성된 signedUrl의 실재 경로는 firebaseStorage의 저장소이기 때문에 크롬 브라우저에서 두 url은 다른 도메인이라고 판단하여 문제가 일어나는 것이다.
특히 fetch의 경우 데이터에 직접 접근하고 다루는 것이 가능하기 때문에, 단순한 html태그인 video태그보다 엄중한 검사가이루어지는 것이다.

그 외에도 cors가 일어날 수 있는 경우

fetch이외에도 ajax나 axios의 경우 내부적으로 XMLHttpRequest나 fetch를 사용하므로 cors에러가 일어날 가능성이 있다.