★★★★★
#데이터·Firebase·보안 · claude-code
Firebase Storage CORS 설정 (웹 액세스)
웹에서 Firebase Storage의 이미지/파일에 직접 액세스할 때 CORS 에러 해결.
#storage#cors#web-access
변수 2개 — 여기 채우면 아래 프롬프트에 바로 들어가요
웹에서 Firebase Storage의 이미지/파일에 직접 액세스할 때 CORS 에러 해결.
문제:
웹에서 `<img src="gs://bucket/image.jpg">` → CORS 에러
해결:
1. CORS 정책 파일 (cors.json):
```json
[
{
"origin": ["https://prayer-app.web.app", "https://prayer-app.com"],
"method": ["GET", "HEAD"],
"responseHeader": ["Content-Type"],
"maxAgeSeconds": 3600
}
]
```
2. 설정 적용 (gcloud CLI):
```bash
gsutil cors set cors.json gs://prayer-app-bucket
```
3. 검증:
```bash
gsutil cors get gs://prayer-app-bucket
```
또는 클라이언트에서 signedUrl 사용:
```dart
final ref = FirebaseStorage.instance.ref('images/photo.jpg');
final url = await ref.getDownloadURL();
// 이 url은 CORS 에러 없음
```
웹 도메인: {{WEB_DOMAIN}}
Storage 버킷: {{STORAGE_BUCKET}}
CORS 설정해줄까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.