Skip to content

CORS Fix for Google Cloud Storage

Problem

Your browser console shows: 

Error loading image: frame-1-intro-text
Failed to load image: https://storage.cloud.google.com/mastaba-assets/...

This is a CORS (Cross-Origin Resource Sharing) issue. The browser blocks loading media from Google Cloud Storage because CORS isn't configured.

Quick Fix (5 minutes)

Step 1: Apply CORS Configuration

Run this command in your terminal:

gsutil cors set cors.json gs://mastaba-assets

The cors.json file is already in your project root with the correct configuration.

Step 2: Verify CORS is Applied

gsutil cors get gs://mastaba-assets

You should see: 

[
  {
    "origin": ["*"],
    "method": ["GET", "HEAD"],
    "responseHeader": ["Content-Type", "Range", "Content-Length", "Accept-Ranges"],
    "maxAgeSeconds": 3600
  }
]

Step 3: Make Files Publicly Accessible

# Make entire folder public
gsutil -m acl ch -r -u AllUsers:R gs://mastaba-assets/Injected\ Outputs/

# OR make entire bucket public (if appropriate)
gsutil iam ch allUsers:objectViewer gs://mastaba-assets

Step 4: Refresh Browser

After applying CORS: 1. Clear browser cache (Ctrl+Shift+Delete) 2. Refresh http://localhost:3000 3. Media should now load!

Alternative: Using Google Cloud Console (Web UI)

If you don't have gsutil installed:

1. Enable CORS via Console

  1. Go to https://console.cloud.google.com/storage/browser
  2. Click on mastaba-assets bucket
  3. Click "Permissions" tab
  4. Click "Add Principal"
  5. Add: allUsers
  6. Role: Storage Object Viewer
  7. Save

2. Configure CORS via Console

  1. In bucket details, click "Configuration" tab
  2. Scroll to "CORS configuration"
  3. Click "Edit"
  4. Paste this:
[
  {
    "origin": ["*"],
    "method": ["GET", "HEAD"],
    "responseHeader": ["Content-Type", "Range"],
    "maxAgeSeconds": 3600
  }
]
  1. Save

Testing CORS

Test in Browser Console

Open browser console (F12) and run:

fetch('https://storage.cloud.google.com/mastaba-assets/Injected%20Outputs/MSTB_1_INTRO_TEXT.jpg')
  .then(r => console.log('Success!', r.status))
  .catch(e => console.error('Failed:', e))

If CORS is working, you'll see: Success! 200

Common Issues

Issue 1: "gsutil not found"

Install Google Cloud SDK: 

# macOS
brew install google-cloud-sdk

# Or download from:
# https://cloud.google.com/sdk/docs/install

Then authenticate: 

gcloud auth login

Issue 2: Permission Denied

Make sure you're authenticated with a Google account that has access to the bucket:

gcloud auth login
gsutil ls gs://mastaba-assets

Issue 3: Still Not Loading After CORS

  1. Hard refresh: Ctrl+Shift+R (or Cmd+Shift+R on Mac)
  2. Clear cache: Chrome DevTools → Network tab → Disable cache
  3. Incognito mode: Try in new incognito window
  4. Wait 1-2 minutes: CORS changes can take a moment to propagate

Issue 4: Mixed Storage URLs

I notice you're using both: - storage.cloud.google.com - storage.googleapis.com

Both work, but for consistency, let me know if you want to standardize on one.

Security Note

Using "origin": ["*"] allows any website to access your media.

For production, you should restrict to your domain:

{
  "origin": ["https://yourdomain.com"],
  "method": ["GET", "HEAD"],
  "responseHeader": ["Content-Type", "Range"],
  "maxAgeSeconds": 3600
}

After CORS is Fixed

You'll see in browser console: 

✅ Experience config loaded
✅ Loading stage 1/8: frame-1-intro-text
✅ Image loaded: frame-1-intro-text
✅ Switched to image scene successfully

And the 360 image will appear in the viewer!

Complete Setup Script

Here's everything in one command sequence:

# 1. Set CORS
gsutil cors set cors.json gs://mastaba-assets

# 2. Make files public
gsutil iam ch allUsers:objectViewer gs://mastaba-assets

# 3. Verify
gsutil cors get gs://mastaba-assets
gsutil ls gs://mastaba-assets/Injected\ Outputs/

# 4. Test one file
curl -I "https://storage.cloud.google.com/mastaba-assets/Injected%20Outputs/MSTB_1_INTRO_TEXT.jpg"

You should see HTTP/2 200 and access-control-allow-origin: * in the headers.

Need Help?

If you're still having issues:

  1. Share the output of: 

    gsutil cors get gs://mastaba-assets

  2. Check browser console for exact error message

  3. Try accessing one URL directly in browser: https://storage.cloud.google.com/mastaba-assets/Injected%20Outputs/MSTB_1_INTRO_TEXT.jpg

  4. If the image loads in browser directly but not in the app, it's definitely a CORS issue

Once CORS is configured, refresh your browser and enjoy your immersive Mastaba VR experience! 🏛️✨