CORS vue.js 与 Firebase 的问题

Question

我正在使用:

• vue.js 2
• vue-route
• vuetify
• firebase
• 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 问题导致文件无法显示。

我研究了这个 解决方案 并在开发代码中添加了以下内容：

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>

- Ozeus

---

你能以任何其他方式与 Firebase 通信吗？ - Pavlos Karalis

@PavlosKaralis 如果你的意思是我可以从Firebase获取数据，那么是的。我可以拉取所有的数据，只是PDF文件无法加载，而且它也没有损坏或其他什么问题。事实上，我已经尝试从这个网站链接加载这个PDF文件，并且我可以在我的应用程序中毫无问题地阅读。我知道这很奇怪。 - Ozeus

你能分享一下用于读取PDF文件的代码吗？ - Renaud Tarnec

@RenaudTarnec 我已经编辑了我的问题并添加了代码，请参考。谢谢。 - Ozeus

谢谢修改。请看我的回答。 - Renaud Tarnec

Answer 1

由于您似乎是通过下载URL下载文件，因此您的问题很可能是因为“要在浏览器中直接下载数据，必须配置您的Cloud Storage存储桶以进行跨源访问（CORS）”，如Cloud Storage doc中所述。您需要使用gsutil命令行工具进行配置，如上述文档所述。

- Renaud Tarnec

---

谢谢，我会查看文档并了解情况。 - Ozeus

嘿，非常感谢你的时间。那解决了我的问题。再次感谢你。 - Ozeus