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

Posted 2023-02-22

【中文标题】Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误

【英文标题】：Firebase Storage CORS error in Vue.js and Nuxt.js

【发布时间】：2021-12-30 20:32:31

【问题描述】：

我正在尝试从我的 Web 应用程序 (Vue.js + Nuxt.js) 下载存储在 firebase-storage 上的 .pdf

但是出现了这个错误

访问获取地址 'https://firebasestorage.googleapis.com/v0/b/************o/chats%2F96U5ERFOmHBGswQhDhaR%2Fdc8c9b64-6bdb-4cd0-b0a9-f59e18f10113?alt=media' 来自原点“https://example.com”的 CORS 策略已阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

到目前为止我尝试的是安装@nuxtjs/proxy 并像这样配置它：

nuxt.config.js

proxy: ["https://firebasestorage.googleapis.com/v0/b/*************"],
modules:[
  '@nuxtjs/proxy',
]

但错误仍然存​​在

【参考方案1】：

您需要在 firebase 上进行更改。

创建文件cors.json

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

并通过 gsutil (Windows) 上传

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