인프런 커뮤니티 질문&답변
작성한 질문수
이미지업로드에러
작성
·
58
·
수정됨
0
강의 잘 듣고 있습니다.
쉽고 편하게 강의해주셔서 공부가 되네요
현재 6.0버전을 쓰고 있습니다.
대부분 강의 영상들이 이전버전에서 만들어진거라 따라하는데 어려운 부분도 있습니다.
특히 이미지업로드문제는 심각했었는데요
업로드타입을 파이어베이스로 하면 이미지타입도 네트워크로 해야하고 해서 에러가 납니다.
이전버전에서는 가능했던 모양인데 현재버전에서는 변경되었는지 안돼더라구요
여전히 강의대로 하면 안되고 있습니다
그래서 엑션업로드타입을 로컬업로드파일로하고 이미지타입을 업로드파일로 하니까 에러가 하나 나오는데 작성완료엑션 컬렉션에서 이미지필드 소스값을 스펙시픽을 하니까 에러가 사라지면서 업로드가 됩니다.
그러나 정상적이지 않은것 같습니다. 쿼리하면 제대로 업로드되지않아요
강의영상과는 달라서 맞게 헸는지 궁금하고요
파이어베이스타입 업로드 방식으로 하려면 어떤 권한설정이 필요한지 자세하게 알려주시면 고맙겠습니다.
강의영상에서는 이미지를 업로드하면 올라오는데 아무리해도 보이지 않습니다
이문제가 빨리 해결되길 바랍니다
.
답변 3
0
안녕하세요 U진입니다.
첨부해주신 스냅샷은 별다른 문제점은 보이지 않고 있습니다.
우선 firebase 콘솔에 로그인 하시어 storage 규칙에 아래와 같이 읽기 쓰기가 허용되어 있는지 확인해주세요.
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
권한 설정이 모두 허용되어 있는데도 에러가 난다면 cors 설정 문제일 가능성이 높습니다.
최근 flutterflow 커뮤니티에도 관련글이 올라왔네요.
firebase storage가 cors 허용을 해줘야 이미지가 보이는데 허용이 되어 있지 않으면 에러가 발생합니다.
명확하게 확인할수 있는 방법은 이미지 업로드시 크롬 개발자 도구를 띄워서 콘솔 로그를 확인해보면 "blocked by cors policy" 이런 메세지가 확인됩니다.
아래와 같이 cors 설정을 적용해 봅니다. mac os 기준으로 제가 직접 테스트 해보았으며 타OS를 사용하신다면 인터넷에 "firebase storage cors 설정"으로 검색해보시면 많은 적용 사례들을 확인하실 수 있습니다.
firebase cli 설치
npm install -g firebase-tools
firebase logingoogld cloud sdk 설치
brew install --cask google-cloud-sdk
gcloud init
cors.json 파일 생성 (*는 테스트용이고 추후 실제 flutterflow 웹앱 주소만 넣어주시면 됩니다.)
[
{
"origin": ["*"],
"method": ["GET", "HEAD", "OPTIONS"],
"maxAgeSeconds": 3600
}
]버킷 이름 확인
gcloud storage buckets list
예시: handsbook-wxhk78.firebasestorage.app
cors 설정 적용
gsutil cors set cors.json 버킷주소
예시: gsutil cors set cors.json gs://handsbook-wxhk78.firebasestorage.app
추가로 브라우저에서 쉘을 이용하여 설정하는 방법도 안내해드리겠습니다.
https://console.cloud.google.com/ 에 접근하여 우측에 클라우드쉘 활성화를 클릭해줍니다.
그럼 하단에 쉘이 활성화 될것입니다.
활성화된 쉘에 3번 항목에서 안내해드린 cors.json 파일을 생성한후 5번에서 안내드린 커맨드를 입력하시면 됩니다.
gsutil cors set cors.json 버킷주소
도움이 되시길 바라며 강의내용에 업데이트 관련 보완 필요한 부분은 보완하도록 하겠습니다.
감사합니다.
0
0
17강 수업노트에 관련사항 링크 기록해두었습니다.
감사합니다.