CORS Policy Blocking Firebase Storage Image Access on Hosted Web App

[MAVRICK-1]

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:

{
  "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/"
          }
        ]
      }
    ]
  }
}

[aalej]

Hey @MAVRICK-1, it looks like the Cross-Origin-Embedder-Policy: require-corp setting in hosting.headers is blocking the request from Firebase Storage since it's from a different origin https://firebasestorage.googleapis.com/. Would you be able to try removing this header to see if the request would go through? The updated firebase.json would look like:

firebase.json

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

or set it to Cross-Origin-Embedder-Policy: credentialless:

firebase.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": "credentialless"
          },
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "same-origin"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "https://causeway.web.app/"
          }
        ]
      }
    ]
  }
}