带有 Firebase 的 CORS vue.js

Question

我正在使用：

• vue.js 2
• vue-route
• vuetify
• 火力基地
• vue-pdf

我的项目涉及从 firebase 阅读 pdf（小说）。我的 pdf 文件存储在存储桶中，并分配给 firebase 中的 Novel_url 字符串。我的主要问题是 CORS 每当我尝试读取数据库中的任何 pdf 文件时都会收到此错误：

Access to fetch at 'https://firebasestorage.googleapis.com/(urlpath)' from origin 'http://localhost:8080' 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.

我用过这个 chrome 插件 Moesif CORS。当它打开时，我可以在我的页面中看到 pdf 文件。所以我的代码可以工作，但是 CORS 问题是阻止它显示文件的原因。 我查看了这个solution 并将以下内容添加到我的开发代码中：

module.exports = {
    // options...
    devServer: {
      proxy: 'https://firebasestorage.googleapis.com/'
    }
  }

我也将网站部署到 netlify，但问题仍然存在。我想知道我是否真的做错了什么？非常感谢任何帮助。

阅读代码：

<template>
  <div>
    <Navbar />
    <v-container fluid>
      <h1>تقرأ الان {{novel.title}}</h1>
      <div class="novel-display">
        <!-- <pdf src="https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK" :page="1"></pdf> -->
        <pdf :src="novel.novel_url" :page="1"></pdf>
      </div>
      <p>{{novel.novel_url}}</p>
    </v-container>
    <Footer />
  </div>
</template>
<script>
import Navbar from "./Navbar";
import Footer from "./Footer";
import pdf from "vue-pdf";
import db from "../firebase/init";

export default {
  name: "Read",
  components: {
    Navbar,
    Footer,
    pdf
  },
  data() {
    return {
      novel: null
    };
  },
  created() {
    let ref = db
      .collection("Novels")
      .where("novel_slug", "==", this.$route.params.novel_slug);
    ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        // console.log(doc.data());
        this.novel = doc.data();
        this.novel.id = doc.id;
      });
    });
  }
};
</script>

<style scoped>
.novel-display {
  border-style: solid;
}
</style>

Answer 1

由于您似乎是通过下载 URL 下载文件，因此您的问题很可能来自“要直接在浏览器中下载数据，您必须将 Cloud Storage 存储桶配置为跨-origin access (CORS)”，如 Cloud Storage doc 中所述。

您需要使用gsutil 命令行工具对其进行配置，如上述文档中所述。