CORS vue.js with firebase

Question

I am using:

• vue.js 2
• vue-route
• vuetify
• firebase
• vue-pdf

My project involves reading pdf (novels) from firebase. my pdf files are stored in a bucket and assigned to a novel_url string in firebase. My main problem is CORS whenever I try to read any pdf file in my database I get this error:

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.

I have used this chrome plugin Moesif CORS. When it is on, I am able to see the pdf file in my page. So my code works, but the CORS problem is what prevents it from displaying the file. I have looked into this solution and add the following into my development code:

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

I also deployed the site to netlify but still problem still exists. I was wondering if I am actually doing something wrong? any help is much appreciated.

Code for reading:

<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

Since it seems that you download the file via a download URL, your problem most probably comes from the fact that "to download data directly in the browser, you must configure your Cloud Storage bucket for cross-origin access (CORS)", as explained in the Cloud Storage doc.

You need to configure it with the gsutil command line tool, as explained in the doc referred to above.