FirebaseのStorage機能でPDFファイルを表示したいが、CORSエラーがでてしまう。

FirebaseのStorageにアップロードしたPDFファイルをReact.jsのアプリ上で表示したい。
PDFを表示できるコンポーネントに、PDFファイルのStorage上でのURLを直接渡して表示させようとしたがCORSラーがでてしまう。
同じコンポーネントに、ウェブ上に上がっているPDFファイルのURLを渡して表示させることは出来ています。
また同じくFirebaseのStrageにアップロードした画像ファイルはイメージタグによって表示することは出来ています。
これはなぜなのでしょうか。どなたか教えてください。。

↓説明の補足

React.js
1import * as React from 'react';
2import { useState,useEffect } from 'react';
3import { DataGrid } from '@material-ui/data-grid';
4import firebase from 'firebase/app';
5
6const columns = [
7  { field: 'id', headerName: 'ID', width: 80 },
8  {
9    field: 'title',
10    headerName: 'タイトル',
11    width: 300,
12    editable: true,
13  },
14  {
15    field: 'category',
16    headerName: 'カテゴリー',
17    width: 150,
18    editable: true,
19  },
20  {
21    field: 'status',
22    headerName: 'ステータス',
23    width: 120,
24    editable: true,
25  },
26  {
27    field: 'about',
28    headerName: '概要',
29    description: 'This column has a value getter and is not sortable.',
30    sortable: false,
31    editable: true,
32    width: 200,
33  },
34];
35
36export default function DataTable({setPdfurl,pdfurl}) {
37  const [rows, setRows] = useState(null)
38  const [select, setSelect] = useState([{category: "", title: "", id:"", status: "", url: ""}]);
39 
40//ここでPDFの一覧を取得
41  useEffect(() => {
42    firebase
43      .firestore()
44      .collection("elearnings")
45      .orderBy(`id`, `desc`)
46      .limit(50)
47      .onSnapshot((snapshot) => {
48        const elearningcollections = snapshot.docs.map((doc) => {
49          return doc.data();
50        });
51        setRows(elearningcollections);
52      });
53  },[]);
54
55//Datagrid上で選択したPDFファイルのURLをstateに格納、このstateをPDF閲覧用のコンポーネントに渡す
56  const handleSet = () => {
57    setPdfurl(select[0]['url'])
58  }
59//選択状態をstateに格納し、何が選択されているかをアプリ上で確認可能
60  const handleRowSelection = (e) => {
61    setSelect(e.map((ri) => rows[ri-1]))
62  }
63  
64  return (
65    <div style={{ height: 400, width: '100%' }}>        
66      {select[0]['title'] &&
67        <div>
68          <h4>「{select[0]['title']}」を閲覧</h4> 
69          <button onClick={handleSet}>View</button>
70        </div>
71      }
72      {rows &&
73        <DataGrid
74          rows={rows}
75          columns={columns}
76          pageSize={5}
77          disableMultipleSelection={true}
78          Selection={true}
79          onSelectionModelChange={handleRowSelection} 
80        />
81      }
82    </div>
83  );
84}

ockeghem

2021/08/31 09:50

エラーメッセージの全文と、Firebaseから返ってくるレスポンスヘッダ（できればリクエストヘッダも）を追記してください

AgeSasami

2021/08/31 14:55

コンソールに表示されるエラーメッセージは、 Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/xxxxxxxxxxxxxxxxxxxxxx.appspot.com/o/xxxxxxxx%2Fxxxxxxxxxx.pdf?alt=media&token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' from origin 'http://localhost:3000' 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. です。また他にも Error while opening the document ! UnknownErrorException {message: "Failed to fetch", name: "UnknownErrorException", details: "TypeError: Failed to fetch"} というPDF-viewerからのエラーメッセージもあります。リクエストヘッダーが、 :authority: firebasestorage.googleapis.com :method: GET :path: /v0/b/xxxxxxxxxxxxxxxxx.appspot.com/o/xxxxxxxxxxxxx%2Fxxxxxxxxxxxxxxxx.pdf?alt=media&token=xxxxxxxxxxxxxxxxxxxxxxxxxxx :scheme: https accept: */* accept-encoding: gzip, deflate, br accept-language: ja,en-US;q=0.9,en;q=0.8 origin: http://localhost:3000 referer: http://localhost:3000/ sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92" sec-ch-ua-mobile: ?1 sec-fetch-dest: empty sec-fetch-mode: cors sec-fetch-site: cross-site user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Mobile Safari/537.36 x-client-data: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+xxxxxxxxxxxxxxxxxx== Decoded: message ClientVariations { // Active client experiment variation IDs. repeated int32 variation_id = [xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx, xxxxxxx]; // Active client experiment variation IDs that trigger server-side behavior. repeated int32 trigger_variation_id = [xxxxxxx]; } でして、レスポンスヘッダーが、 accept-ranges: bytes alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43" cache-control: private, max-age=0 content-disposition: inline; filename*=utf-8''xxxxxxxxxxxxxxxx.pdf content-length: 637428 content-type: application/pdf date: Tue, 31 Aug 2021 13:08:33 GMT etag: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" expires: Tue, 31 Aug 2021 13:08:33 GMT last-modified: Wed, 25 Aug 2021 01:18:20 GMT server: UploadServer x-goog-generation: XXXXXXXXXXXXXX x-goog-hash: crc32c=xxxxxxxx== x-goog-hash: md5=XXXXXXXXXXXXXXXXXXX== x-goog-meta-firebasestoragedownloadtokens: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x-goog-metageneration: 1 x-goog-storage-class: STANDARD x-goog-stored-content-encoding: identity x-goog-stored-content-length: 637428 x-guploader-uploadid: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX というかんじです。403などが返ってきていないのが私にはなぜか分からないのですが、、よろしくお願いいたします。