CORS on firebase storage - firebase

Question

I'm gettin the normal cors error on my firebase storage when I do a get call on an html file:
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
I'm using axios for the call:
axios.get('https://firebasestorage.googleapis.com/v0/b/xxxxx-xxxxx.appspot.com/o/files%2Fsigning%2F148%2F459.html?alt=media&token=f3be2ef2-a598-4c30-a77b-8077e8b1f7bc',
{
headers: {'Access-Control-Allow-Origin': '*',}
)
I have the access set to public:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
This same setup works fine when I load images but it's giving me the error for the stored html file. Any thoughts on how to fix it?

Answer 1

Firebase is using the same storage infrastructure as google cloud and even though there is no firebase method to set the cors rules, you can use gc set up.
First you need to install google cloud sdk:
curl https://sdk.cloud.google.com | bash
Restart your shell:
exec -l $SHELL
Initialize gcloud. This will ask you to select your account and authenticate.
gcloud init
Then create a json file with the following content
[
{
"origin": ["http://example.appspot.com"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE"],
"maxAgeSeconds": 3600
}
]
And run this with your firebase storage gc: endpoint
gsutil cors set yourFile.json gs://yourProject
That should fixe the problem for you as well.

Answer 2

After init the application you need to use setCorsConfiguration method
// Imports the Google Cloud client library
const {Storage} = require('#google-cloud/storage');
// Creates a client
const storage = new Storage();
/**
* TODO(developer): Uncomment the following lines before running the sample.
*/
// The ID of your GCS bucket
// const bucketName = 'your-unique-bucket-name';
// The origin for this CORS config to allow requests from
// const origin = 'http://example.appspot.com';
// The response header to share across origins
// const responseHeader = 'Content-Type';
// The maximum amount of time the browser can make requests before it must
// repeat preflighted requests
// const maxAgeSeconds = 3600;
// The name of the method
// See the HttpMethod documentation for other HTTP methods available:
// https://cloud.google.com/appengine/docs/standard/java/javadoc/com/google/appengine/api/urlfetch/HTTPMethod
// const method = 'GET';
async function configureBucketCors() {
await storage.bucket(bucketName).setCorsConfiguration([
{
maxAgeSeconds,
method: [method],
origin: [origin],
responseHeader: [responseHeader],
},
]);
console.log(`Bucket ${bucketName} was updated with a CORS config
to allow ${method} requests from ${origin} sharing
${responseHeader} responses across origins`);
}
configureBucketCors().catch(console.error);
This is my example with NestJs
import { ConfigService } from '#nestjs/config';
import * as admin from 'firebase-admin';
const configureBucketCors = async (app) => {
const configService: ConfigService = app.get(ConfigService);
return admin
.storage()
.bucket(configService.get<string>('BUCKET_NAME'))
.setCorsConfiguration([
{
origin: ['http://localhost:3000'],
responseHeader: ['Content-Type'],
method: ['GET', 'HEAD', 'DELETE'],
maxAgeSeconds: 3600,
},
]);
};
export default async (app) => {
const configService: ConfigService = app.get(ConfigService);
await admin.initializeApp({
databaseURL: configService.get<string>('FIREBASE_DATABASE_URL'),
storageBucket: configService.get<string>('BUCKET_NAME'),
});
await configureBucketCors(app);
};
Check the docs for more details
https://cloud.google.com/storage/docs/cross-origin
https://cloud.google.com/storage/docs/configuring-cors#storage_cors_configuration-nodejs