Builder Blocked by external services - how to whitelist?

Technical Questions
1

I developed a feature which is not working on the builder environment but works fine once deployed or running locally on my machine.

Builder content link
Fusion

Builder public api key
17cf155901d9412d91f3909c0aedbfdb

What are you trying to accomplish
I have as feature which downloads Whispr model files to do on-device voice recognition. I’m hosting the files on firebase storage (was initially downloading directly from huggingface but was encountering issues, so I resorted to having them on a controlled environment to check if access was the issue). The file download works fine when the code is deployed, but somehow not in builder… My firebase storage rules are open for reads on the folder, and CORS policy set on the bucket to allow get on https://*.fly.dev which I thought would work…

Screenshots or video link

image
image272×341 15.8 KB
on builder –> progress stuck at 15% (no files downloading)

image
image342×424 19.1 KB
deployed –> file download complete

Code stack you are integrating Builder with
*Firebase DB, Firebase Storage, GCP

Any ideaS?*

2

Correction: It works fine when DEPLOYED on Firebase Hosting…does NOT work on my local environment (localhost:8080). How could that be?

3

Hello @SJCGALLET,

It looks like the issue you’re running into is likely related to CORS and the environment your code is running in.

Here’s what’s happening:

Why it works when deployed but not in Builder/local:

  • Your Firebase Storage CORS is probably set to allow only your deployed domain (e.g., https://*.fly.dev).
  • Builder.io previews and local development (http://localhost:8080) are different origins, so the browser blocks the download due to CORS restrictions.
  • That’s why downloads complete fine when deployed, but get stuck at 15% in Builder or on localhost.

Possible solutions:

  1. Update Firebase Storage CORS to include local dev and Builder preview origins. For example:
[
  {
    "origin": ["http://localhost:8080", "https://builder.io", "https://*.fly.dev"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Then apply it with:

gsutil cors set cors.json gs://YOUR_BUCKET_NAME
  1. Use signed URLs for your files. This bypasses CORS restrictions and works in any environment since the URL itself grants access.
  2. Proxy through your server: Create an endpoint on your server that fetches the files from Firebase and serves them to the client. Since the client is calling your server (same origin), CORS issues are avoided entirely.

Hope this helps!

Thanks,

1 Like