Flutter web 에서 getData() 로 Storage 호출시 XmlHttpRequest error 발생할 때
Flutter 에서 버킷 내 /index/index.json 파일을 받아오는 단순한 코드인데 :
Reference ref = FirebaseStorage.instance.ref().child('index/index.json');
final Uint8List? bytes = await ref.getData();
다음과 같이 XmlHttpRequest 에러가 발생했습니다:
Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10 createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 355:28 _throw
dart-sdk/lib/core/errors.dart 120:5 throwWithStackTrace
dart-sdk/lib/async/zone.dart 1385:11 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15 <fn>
Application finished.
XmlHttpRequest 문제의 원인은 대부분의 경우 CORS 죠.
이와 관련된 문서는 다음을 참고하면 됩니다:
https://firebase.google.com/docs/storage/web/download-files#cors_configuration
https://cloud.google.com/storage/docs/using-cors
1. cors.json 파일을 작성합니다.
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
2. cors.json 파일을 버킷에 적용합니다.
gcloud storage buckets update gs://YOUR_BUCKET_NAME.appspot.com --cors-file=cors.json
3. 잘 적용되었는지 확인합니다.
gcloud storage buckets describe gs://YOUR_BUCKET_NAME.appspot.com --format="default(cors)"
댓글
댓글 쓰기