작성한 질문수 1

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 설정"으로 검색해보시면 많은 적용 사례들을 확인하실 수 있습니다.

1. firebase cli 설치

npm install -g firebase-tools
firebase login

2. googld cloud sdk 설치

brew install --cask google-cloud-sdk
gcloud init

3. cors.json 파일 생성 (*는 테스트용이고 추후 실제 flutterflow 웹앱 주소만 넣어주시면 됩니다.)

    

[

{

"origin": ["*"],

"method": ["GET", "HEAD", "OPTIONS"],

"maxAgeSeconds": 3600

}

]

4. 버킷 이름 확인

gcloud storage buckets list
예시: handsbook-wxhk78.firebasestorage.app

5. 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

답변을 기다리느라 진도가 안나갑니다.

다른 분들은 이런 에러가 없나요?

강사님의 답변을 기다립니다