Configuring CORS for Firebase Storage (post Flutter 3.32.4 upgrade)

Hi all, I am making this post because I've seen quite a few posts in the forum about photos in Firebase storage not showing up after the release. I hope these steps will help you fix them.

First off, why is this happening?

In the July 8 FlutterFlow release, we upgraded to Flutter 3.32.4. One of the breaking changes, according to our migration guide, is removal of the html renderer for web. To do this, you will need to configure CORS.

Configuring CORS for Firebase Storage

(Update: the documentation for this has been updated as of July 10 2pm Eastern Time)

You can follow all the steps in the documentation here: https://docs.flutterflow.io/troubleshooting/firebase/configuring-cors-for-firebase-storage

(Update 7/13: Steven Liu has made this wonderful explanation video on his channel: https://www.youtube.com/watch?v=uZRIzAHpLDQ. Thank you Steven Liu! The steps are slightly different from the documentation but should hopefully lead you to the same result)

https://www.youtube.com/watch?v=uZRIzAHpLDQ

Also copied + pasted below:

Open Google Cloud Console.
Launch the Cloud Shell:
Click the Activate Cloud Shell icon in the top-right corner.
Wait for the terminal to load.

Run the following Command:

gcloud config set project your-firebase-project-id;

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:
```
"origins": ["https://www.example.com"]
```
You can also specify a list of allowed headers. The following example allows access to the Content-Type and Authorization headers:
```
"origins": ["https://www.example.com"], "allowedHeaders": ["Content-Type", "Authorization"]
```
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.
```
[
    {
        "origin": ["*"],
        "method": ["GET"],
        "maxAgeSeconds": 3600
    }
]
```
Once you have defined your cors.json file, upload it to Google Cloud Console.
To confirm that you have uploaded it correctly, you can run ls in your console and you should see your cors.json file listed.

Run the cors Command to Configure CORS:

gcloud storage buckets update gs://your-google-storage-bucket-name --cors-file=cors.json

(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.
```
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.

After you've done this, try running your app again. Let me know if you run into any issues!