firebase CORS 에러 Response to preflight request doesn't pass access control check ~

어떤 에러?

파이어베이스 스토리지에 이미지 업로드를 구현하던 중 CORS 에러를 만나게 되었다.

 

Access to XMLHttpRequest at '~~' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

원인 파악

교차 출처 리소스 공유 (Cross-origin resource sharing)가 허용이 되어있지 않아서 생긴 오류!..

CORS 에러를 해결하기 위해서는 클라이언트 쪽에서도 처리를 해줘야 하지만 서버 쪽에서도 처리를 해주어야 한다.

지금 같은 경우는 파이어베이스 서버 쪽에서 CORS 설정을 해보기로 했다.

 

 

해결 과정

https://console.cloud.google.com/

Google 클라우드 플랫폼

 

 

먼저 클라우드 콘솔에 들어간다.

상단에서 현재 파이어베이스 프로젝트를 선택한 후에, 검색창 바로 오른쪽의 터미널 활성화 버튼 클릭한다.

 

 

그럼 브라우저 하단에 아래와 같은 터미널 창이 열리는데, 편집기 열기를 누르면 GUI로 파일을 작성할 수 있다.

 

 

원하는 도메인만 추가하고 싶다면 * 대신에 배열에다 도메인을 추가해 준다. ["https://example.com"\]

[
  {
 "origin": ["*"],
 "method": ["GET"],
 "maxAgeSeconds": 3600
  }
]

 

 

json 파일로 저장을 해준다. 파일명은 자유지만 보통 cors.json 이라고 저장하는 듯하다.

 

 

다시 콘솔 터미널을 열고, 아래 명령어를 입력해 준다.

gsutil cors set cors.json gs:스토리지주소

 

참고로 스토리지 주소는 스토리지에서 쉽게 찾을 수 있다.

 

 

위 명령어를 입력해 주면 이런 승인 창이 하나 뜬다.

 

 

승인하면 터미널에 아래와 같은 메시지가 뜨고 CORS 에러가 사라진다!

Setting CORS on gs://스토리지주소

 

 

 

CORS 에러에 대해 잠깐 공부하고 나니 왜 발생한 것인지 짐작이 좀 가서 어렵지 않게 해결했던 것 같다. 🤔

 

 

 

참고글

https://stove99.github.io/etc/2021/06/09/firebase-storage-cors-setting/