Vue.js与Nuxt.js项目下载Firebase Storage的PDF出现CORS错误怎么解决？

方案1：配置Firebase Storage CORS规则（推荐，全环境适用） #

这是最根本的解决方案，直接在存储侧配置允许跨域的源：

• 新建cors.json配置文件，填入以下内容：

[
  {
    "origin": ["你的前端生产域名", "http://localhost:3000"],
    "method": ["GET", "OPTIONS", "HEAD"],
    "responseHeader": ["*"],
    "maxAgeSeconds": 3600
  }
]

将origin数组中的内容替换为你实际的前端访问地址，多个域名可以并列写入。

• 安装Firebase CLI并登录你的项目账号后，执行命令：
  gsutil cors set cors.json gs://你的Firebase存储桶名
  执行完成后等待3-5分钟生效，即可正常跨域访问存储文件。

方案2：正确配置Nuxt代理（仅适用于开发环境临时调试） #

你之前的配置失效有两个原因：一是@nuxtjs/proxy仅默认对开发环境生效，生产环境部署后不会生效；二是代理配置写法不正确，没有做路径重写，前端请求也没有改为指向代理路径。
修改nuxt.config.js中的代理配置为如下格式：

modules: [
  '@nuxtjs/proxy',
],
proxy: {
  '/storage-proxy': {
    target: 'https://firebasestorage.googleapis.com/v0/b/你的存储桶完整路径',
    pathRewrite: { '^/storage-proxy': '' },
    changeOrigin: true
  }
}

修改前端的下载请求地址：将原本直接指向firebasestorage.googleapis.com的请求，改为请求/storage-proxy/后续路径参数，即可在开发环境下绕过CORS限制。
如果生产环境需要使用代理方案，需要额外在你部署Nuxt应用的服务端（如Nginx、云服务平台的路由配置）配置对应的代理转发规则。

内容的提问来源于stack exchange，提问作者E. Williams