Firebase Storage CORS 설정 방법

Google Cloud Platform

파이어베이스 스토리지에 저장된 이미지를 fetch로 불러와서 File타입으로 활용해야할 일이 있었는데, 처음에 요청을 하니 CORS문제로 데이터가 날아오지않았다.

 

해당 문제를 해결해 보려고한다.

 

먼저 CORS문제를 해결하려면 GCP에서 해당하는 프로젝트로 들어간다음 storage대시보드로 들어간다.

 

그다음 CORS를 해제할 버킷 세부정보로 들어간다음 상단 위에 콘솔을 클릭하여 연다

상단 오른쪽에 개발자 도구 아이콘이 보인다

콘솔창을 열면 하단에 까만 화면이 뜨면서 입력할수있게 될것이다!

 

이제 해당 창에서 다음 명령어를 입력하여 CORS설정 파일을 만든다.

echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

이렇게 입력후에 콘솔창에 ls를 입력후 살펴보면 cors-config.json이 만들어져있는걸 볼 수 있다.

여기서 origin안에들어가는 내용에는 본인이 화이트 리스트에 추가하고싶은 URL을 넣어도 무방하다(https://www.example.com)

 

그다음 해당 CORS설정파일을 적용할 버킷을 골라서 적용을 시켜줘야하는데 이과정에서 gsutil을 사용하게되는데 아래명령어를 입력해서 버킷에 CORS설정을 추가하도록 하자

gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

여기서 gsutil 사용관련해서 승인여부가 나올수있는데 승인을 눌러주자

승인해주도록 하자

 

연결 명령어에서 당연한거지만 YOUR_BUCKET_NAME에는 반드시 여러분의 버킷을 입력해야한다.

버킷의 이름은 파이어베이스 스토리지에서 확인할 수 있다.

 

이제, CORS세팅 파일이 잘 적용되었는지 확인하려면 해당 명령어를 입력해보자.

gsutil cors get gs://YOUR_BUCKET_NAME

그러면 아래와 같은 response가 올것이다.

[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD"], "origin": ["*"], "responseHeader": ["Content-Type"]}]

이제 fetch로 이미지를 가져오면 끝!

 

잘 안된다면 댓글을 달아달라! 😁