flutter web firebasestorage cors error, The following ProgressEvent$ object was thrown resolving an image codec: [object ProgressEvent]

[문제상황]

Flutter web에서 Firebase storage에 올려둔 이미지를 사용할 경우 오류가 뜨는 상황

 

[해결방법]

1. 해당 Firebase의 GCP(GoogleCloudPlatform)로 이동한다

2.우측 상단에 있는 Cloud Shell 버튼을 누른다

3. 터미널이 활성화되면 echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json  를 입력한다, 또는 특정 url에만 허용하고 싶다면 echo '[{"origin": ["https://yourdomain.com"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json 를 입력한다

 

4. Firebase storage에 가면 볼 수 있는 BUCKET_NAME을 복사한 후 gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME를 입력한다

 

BUCKET_NAME 은 사진에 보이는 링크아이콘 옆에있는 gs://로 시작하는 것을 의미한다