firebase / firebase/firebase-tools

CORS Policy Blocking Firebase Storage Image Access on Hosted Web App

Open
#8,364 1 comment 0 reactions 0 assignees View on GitHub
api: hosting api: storage type: bug
Dominant language
TypeScript
Stars
4.5k
Forks
1.3k
Avg merge
1d 12h
Merged PRs (30d)
84

Description

# Bug Report

## [REQUIRED] Environment Info

**firebase-tools:** (Provide the output of `firebase --version`)

**Platform:** (e.g., macOS, Windows, Ubuntu)

## [REQUIRED] Test Case

Access to an image in Firebase Storage is blocked due to a missing `Access-Control-Allow-Origin` header in CORS policy.

## [REQUIRED] Steps to Reproduce

1. Host the application on Firebase at `https://causeway.web.app`.
2. Attempt to access an image stored in Firebase Storage using the following URL:

```
https://firebasestorage.googleapis.com/v0/b/tech4good-causeway.appspot.com/o/profile-images%2F1742934426211_Screenshot%20from%202025-03-08%2002-04-14.png?alt=media&token=xxxxx
```

3. Observe the console error regarding the CORS policy.

## [REQUIRED] Expected Behavior

The image should load correctly without any CORS-related errors.

## [REQUIRED] Actual Behavior

The request to Firebase Storage fails with the following error in the browser console:

```
Access to image at 'https://firebasestorage.googleapis.com/v0/b/tech4good-causeway.appspot.com/o/profile-images%2F1742934426211_Screenshot%20from%202025-03-08%2002-04-14.png?alt=media&token=xxxxx' from origin 'https://causeway.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

## Additional Information

**firebase.json configuration:**

```json
{
"hosting": {
"site": "causeway",
"public": "./dist/causeway2/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/**",
"headers": [
{
"key": "Cross-Origin-Embedder-Policy",
"value": "require-corp"
},
{
"key": "Cross-Origin-Opener-Policy",
"value": "same-origin"
},
{
"key": "Access-Control-Allow-Origin",
"value": "https://causeway.web.app/"
}
]
}
]
}
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.