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

안녕하세요 햄스터달구지님, 해당 문제를 해결하는 방법을 강의로 촬영하여 공유 드립니다.

https://inf.run/bRdrz

감사합니다.

플러터플로우 측엔 이것도 결국 불편함이니, 해결할 수 있게 해달라 요청한 상태입니다.

저도 동일한 에러 발생하고 있습니다. 버그라기에는 너무 오래 가는거 아닐까요? 분명히 6월까지는 이미지가 잘 뜨는 상태였습니다. 디버그 패널이나 manage content 화면에서는 주소를 제대로 받아오고 클릭하면 새 창에서는 이미지가 잘 보입니다.

안녕하세요 햄스터달구지님,

불편을 드려 정말 죄송합니다.

해당 건은 버그가 맞습니다.

그리고 커뮤니티를 다시 살펴봐도 아직 버그가 수정되지 않은 것 같습니다.

https://community.flutterflow.io/ask-the-community/post/firebase-image-is-not-loading-showing-imagecodecexception-SrvJTft3SF1Cm5i

부득이하게, 이미지 추가를 잠시 뛰어넘고 다른 것들을 학습하시는 것을 추천 드립니다. 🥲

해결이 되면 공지사항으로 올려 알려드릴게요.

불편을 드려 다시한번 죄송합니다.

안녕하세요, 인프런 AI 인턴입니다. 햄스터달구지님께서 문의하신 플러터플로우에서 CORS Proxy 설정 변경 후에도 이미지가 적용되지 않는 문제에 대해 도움 드리겠습니다.

문제 요약

CORS(Cross-Origin Resource Sharing)는 웹 페이지가 도메인 간 리소스를 요청할 때 보안상의 이유로 제한하는 기능입니다. 이미지가 로드되지 않는 문제는 CORS 설정의 문제일 가능성이 큽니다.

해결책

1. CORS 설정 확인 및 업데이트:

   • 플러터플로우에서 ‘CORS Proxy for Images’를 “None”으로 설정하였다면, 실제로 이미지가 외부 도메인에서 올바르게 불러올 수 있도록 CORS 설정이 이루어졌는지 검토해야 합니다. 이미지가 불러와지는 도메인에서 CORS를 허용하도록 서버 설정이 필요한지 확인해 보세요.
     

2. Image URL 직접 접근 테스트:

   • 브라우저에서 직접 이미지 URL을 입력하여 이미지를 불러올 수 있는지 확인해 보세요. 만약 이미지가 직접 접근되면, CORS가 아닌 다른 문제일 수 있습니다.
     

3. Console Errors 확인:

   • 브라우저 개발자 도구(개발자 모드: F12)를 통해 콘솔에서 발생하는 오류를 확인하고, 구체적인 에러 메시지를 바탕으로 문제를 해결하세요. 보통 CORS 관련 문제는 콘솔에 에러 메시지가 표시됩니다.
     

4. 서버 측 CORS 설정:

   • 만약 자체적으로 서버를 운용 중이시라면, 서버의 CORS 설정을 점검하세요. Apache, Nginx 등의 웹 서버의 CORS 설정을 수정하여 필요한 경우 정확한 HTTP 응답 헤더에 Access-Control-Allow-Origin을 설정해야 합니다.
     

참고 URL

제가 찾은 유사한 문제의 해결 방법 게시글입니다:
- “파이어베이스 크리에이트 프로젝트 하면 create error 납니다”: 이 게시글은 Firebase 설정 관련 문제를 해결하는 방법을 다루고 있지만, 유사한 CORS 오류 해결에 도움이 될 수 있습니다.

햄스터달구지님의 문제 해결에 도움이 되기를 바랍니다. 추가적인 질문이 있거나 문제가 지속된다면 언제든지 문의해 주세요.

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