Javascript CORS vue.js与firebase

我正在使用：

• vue.js 2
• vue路线
• 武装分子
• 火基
• vue pdf

我的项目包括阅读firebase的pdf（小说）。我的pdf文件存储在一个存储桶中，并分配给firebase中的一个新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>

تأاا㶌{小说.标题}
{{novel.novel}

从“/Navbar”导入导航栏；
从“/Footer”导入页脚；
从“vue pdf”导入pdf；
从“./firebase/init”导入数据库；
导出默认值{
名称：“读”，
组成部分：{
导航栏，
页脚，
pdf
},
数据（）{
返回{
小说：空
};
},
创建（）{
设ref=db
.收藏（“小说”）
.where（“novel_slug”，“==”，this.$route.params.novel_slug）；
ref.get（）.then（快照=>{
snapshot.forEach（doc=>{
//console.log（doc.data（））；
this.novel=doc.data（）；
this.novel.id=doc.id；
});
});
}
};
.新颖的展示{
边框样式：实心；
}

由于您似乎是通过下载URL下载文件，您的问题很可能来自这样一个事实，即“要直接在浏览器中下载数据，，您必须将云存储桶配置为跨源访问（CORS）”，如云存储中所述

---

您需要使用

gsutil

命令行工具对其进行配置，如上述文档所述。

您是否能够以任何其他身份与firebase通信？@PavlosKaralis如果您的意思是，我可以从firebase获取数据，是的。我可以拉我所有的数据，只是pdf文件不会加载，它不是borken或任何东西。事实上，我已经尝试从这个网站加载这个pdf文件，我可以在我的应用程序中毫无问题地阅读。我知道这很奇怪。你能分享一下用来阅读PDF文件的代码吗？@RenaudTarnec我已经编辑了我的问题并添加了代码。请参考它。谢谢。谢谢你的编辑。请看我的答案。谢谢。我会查看文档并查看。嘿，谢谢你抽出时间。这解决了我的问题。再次感谢你。