diff --git a/docs/troubleshooting/assets/uploadToGCC.png b/docs/troubleshooting/assets/uploadToGCC.png new file mode 100644 index 00000000..69a2ca03 Binary files /dev/null and b/docs/troubleshooting/assets/uploadToGCC.png differ diff --git a/docs/troubleshooting/firebase-issues/configuring_cors_for_firebase_storage.md b/docs/troubleshooting/firebase-issues/configuring_cors_for_firebase_storage.md index 5c6f8aa8..a7384c02 100644 --- a/docs/troubleshooting/firebase-issues/configuring_cors_for_firebase_storage.md +++ b/docs/troubleshooting/firebase-issues/configuring_cors_for_firebase_storage.md @@ -29,39 +29,56 @@ Follow these steps to configure CORS for your Firebase Storage bucket: 3. **Run the following Command:** ```jsx - gcloud config set project <your-project-id> + gcloud config set project your-firebase-project-id; ``` -4. **Navigate to your Firebase Storage bucket:** +4. **Define and upload your cors.json file:** + + The `cors.json` file contains a list of origins that are allowed to access your resources. Each origin is a string that identifies a domain or port. For example, the following origin allows access from the domain `www.example.com`: ```jsx - cd gs://<your-bucket-name> + "origins": ["https://www.example.com"] ``` -5. **Run the `cors` Command to Configure CORS:** + You can also specify a list of allowed headers. The following example allows access to the `Content-Type` and `Authorization` headers: ```jsx - gsutil cors set cors.json gs://<your-bucket-name> + "origins": ["https://www.example.com"], "allowedHeaders": ["Content-Type", "Authorization"] ``` - You can also specify a list of allowed headers by running the following command: + To allow any origin to access your resource, you can use `*`. The `cors.json` file below allows any origin to access, but not modify your resources. ```jsx - gsutil cors set cors.json gs://<your-bucket-name> --allowed-headers="Content-Type, Authorization" + [ + { + "origin": ["*"], + "method": ["GET"], + "maxAgeSeconds": 3600 + } + ] ``` - The `cors.json` file contains a list of origins that are allowed to access your resources. Each origin is a string that identifies a domain or port. For example, the following origin allows access from the domain `www.example.com`: + Once you have defined your `cors.json` file, upload it to Google Cloud Console. - ```jsx - "origins": ["https://www.example.com"] - ``` + ![](../assets/uploadToGCC.png) - You can also specify a list of allowed headers. The following example allows access to the `Content-Type` and `Authorization` headers: + To confirm that you have uploaded it correctly, you can run `ls` in your console and you should see your `cors.json` file listed. + + +5. **Run the `cors` Command to Configure CORS:** ```jsx - "origins": ["https://www.example.com"], "allowedHeaders": ["Content-Type", "Authorization"] + gcloud storage buckets update gs://your-google-storage-bucket-name --cors-file=cors.json ``` +6. **(Optional) Confirm success by viewing the CORS of your bucket** + + Run the following command to confirm that the rules from your `cors.json` file were applied. + ```jsx + gcloud storage buckets describe gs://your-google-storage-bucket-name --format="default(cors_config)" + ``` + You should see the same allowed origins and any other info defined in your `cors.json` file. + For more information on configuring CORS in Firebase Storage, please see the **[official documentation](https://firebase.google.com/docs/storage/web/download-files#cors_configuration)**.