XMLHttpRequest Error While Retrieving a Firebase Storage File

When retrieving a firebase storage file, XMLHttpRequest errors are most commonly returned. As a result, this article will assist in resolving it.

Error Looks like this

Error: XMLHttpRequest is not definedorError: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 264:20......        

Solution

To download data link image or files directly in the browser, you must configure your Cloud Storage bucket for cross-origin access (CORS). This can be done with the gsutil command line tool,

1. Create a JSON file

Create a JSON file named cors.json and save into your desktop

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]        

2. Configure your Cloud Storage bucket for cross-origin access (cors.json)

Import cors.json file

• Go to you project into Google cloud console and click on Active Cloud Shell.

• Upload cors.json file

3. Finally Deploy Restrictions

Run gsutil cors set cors.json gs://<your-cloud-storage-bucket> to deploy these restrictions.

gs://<your-cloud-storage-bucket> found on Google Console/Cloud Storage/Browser

Conclusion

That’s it for me I hope you enjoyed this article if you did feel free to clap and share with others if you didn’t please let me know in the comment’s what I am missing.