Firebase 存储 CORS Vue.js 和 Nuxt.js 错误

Question

I am trying to download a.pdf stored on firebase-storage from my web application (Vue.js + Nuxt.js)

But got this error

Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/************o/chats%2F96U5ERFOmHBGswQhDhaR%2Fdc8c9b64-6bdb-4cd0-b0a9-f59e18f10113?alt=media' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

What I have tried so far is to install @nuxtjs/proxy and configure it like this:

nuxt.config.js

proxy: ["https://firebasestorage.googleapis.com/v0/b/*************"],

modules:[
    '@nuxtjs/proxy',
]

But error is still there

Answer 1

You need to do the changes on firebase.

Just create a file cors.json

[
  {
    "origin": [ "https://example.com" ],
    "method": [ "GET" ],
    "maxAgeSeconds": 3600
  }
]

And upload it via gsutil (Windows)

gsutil cors set cors.json gs://<your bucket>