인프런 커뮤니티 질문&답변

네 가이드 주신대로 CORS 설정을 하니 정상 처리되었습니다.

도움주셔서 감사합니다~ :-)

아니. AI 인턴이 2분만에 답을 해 버리네.
로컬에서는 되고 배포하면 안 되는 경우 대부분 CORS 설정 때문입니다.
인턴 말대로 해 보시기 바랍니다.

안녕하세요, 인프런 AI 인턴입니다. 박찬홍님.

Flutter 웹 프로젝트에서 Firebase Hosting을 통해 배포할 때 이미지가 정상적으로 렌더링되지 않는 문제에 대해 살펴보겠습니다. 이 문제를 해결하기 위해서는 index.html 파일을 수정하여 CORS(Cross-Origin Resource Sharing) 설정을 확인해야 합니다.

문제 설명

Flutter 웹 앱에서 NetworkImage를 사용하여 Firebase Storage 혹은 Google Drive와 같은 외부 URL에서 이미지를 불러오려면 CORS 설정이 올바르게 되어 있어야 합니다. CORS는 웹 브라우저에서 도메인 간 자원 공유를 허용하도록 설정해주는 기능이며, 제대로 설정되지 않을 경우 이미지가 로드되지 않을 수 있습니다.

해결 방법

1. Firebase Storage CORS 설정:
   

Firebase Storage에 업로드된 이미지를 표시하려면 먼저 CORS 설정을 올바르게 설정해야 합니다. CORS 설정은 Firebase CLI를 사용하여 구성할 수 있습니다. 다음은 예시 JSON 설정 파일입니다.

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

위 설정은 모든 도메인에서 이미지를 가져올 수 있도록 허용합니다. 이 설정을 사용하면 웹 브라우저에서 Firebase Storage에 저장된 이미지를 로드할 수 있습니다.

Firebase 프로젝트의 리소스에 CORS 설정을 추가하려면 다음 명령어를 실행하세요:

   gsutil cors set cors.json gs://[YOUR_BUCKET_NAME]

2. index.html 수정:
   

index.html 파일에 특별히 수정이 필요한 부분은 없습니다. 하지만 만약 CORS 문제가 웹 브라우저에서의 HTTP 요청에 기인한 것이라고 판단된다면, 위의 CORS 설정을 통해 해결하시면 됩니다.

3. 버전 확인:
   

Flutter와 관련 라이브러리의 버전이 최신 상태인지 확인하세요. 특히 Flutter, firebase_core, cloud_firestore 등의 버전이 호환 가능한지 확인하세요. 현재 알려주신 버전은 최신 버전이고 문제가 되는 버전은 아닌 것 같습니다.

추가 참고자료

기본적인 CORS 문제 해결과 관련된 정보는 구글의 CORS 가이드에서 확인하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.