Firebase CORS 에러

문제발생

바닐라 자바스크립트로 작성한 웹사이트를 파이어베이스 호스트에 호스팅한 후, 이 웹사이트에서 파이어베이스 클라우드 functions에 있는 함수(새로 만듦)를 호출하려 하는데 CORS 에러 뜸. 이걸로 이틀 꼬박 보냄... 내 피같은 시간... 😇

해결책 찾기

1. CORS 해결책을 구글링해서 방법만 찾는다 한들, 근본적인 이해가 없으면 임시로 떼우는거니 CORS 개념에 대해 공부함.
2. 개발자도구 콘솔창/네트워크에서 에러 다시 확인.
3. 클라이언트 사이드 이상유무 확인.
4. 서버 사이드 이상유무 확인.
5. 테스트 및 파이어베이스 functions log 확인.
6. 솔라피쪽 설정 확인.

문제 원인 점검

해결책을 찾아본 후 문제의 원인을 점검해봤다.

1. 서버쪽은 이상이 없음. 왜냐면 functions에 있는 함수 하나를 원래 사용중이었는데, 문제가 전혀 없었음. cors 처리를 이미 했기 때문.
2. 에러메세지를 보니 서버쪽은 Response Header에 'Access-Control-Allow-Origin'가 내가 서비스하고 있는 사이트 origin으로 잘 달려 왔음. 근데 클라이언트쪽이 이를 못받은 걸로 판단. 그래도 혹시나 해서 서버쪽 환경설정도 다시 확인함.
3. 클라이언트쪽 설정.

설정확인(클라이언트)

1. firebase.json