带火源的CORS vue.js

Question

我正在使用：

• vue.js 2
• vue-路线
• 争夺战
• 火力基地
• vue-pdf

我的项目包括阅读pdf (小说)从火基地。我的pdf文件存储在一个桶中，并分配给一个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.

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

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

我也部署了网站上网，但仍然存在问题。我在想我是不是真的做错了什么？任何帮助都是非常感谢的。

阅读代码：

<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下载文件，所以您的问题很可能来自这样一个事实：“要在浏览器中直接下载数据，您必须配置云存储桶以进行跨源访问(CORS)"，正如云存储文档中所解释的那样。

您需要使用gsutil命令行工具配置它，如上面提到的文档中所解释的那样。