It seems that the issue only occurs in the production environment, as fetching the URL and passing it to React-PDF works fine in local and development environments. However, when React-PDF attempts to request the PDF document, the error arises. Is there a solution to resolve this issue?

import React, { useState } from 'react';
import { pdfjs, Document, Page } from 'react-pdf';
import useWindowSize from 'hooks/useWindowSize';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

const options = {
  cMapUrl: '/cmaps/',
  standardFontDataUrl: '/standard_fonts/',
  httpHeaders: { Origin: 'https://app.e-english.com.au' }
};

export const ReactPdf = (props) => {
  const { url } = props;
  const [numPages, setNumPages] = useState();
  const [width] = useWindowSize();

  const onDocumentLoadSuccess = ({ numPages: nextNumPages }) => {
    setNumPages(nextNumPages);
  };

  console.log('PDF URL:', url);
  const pdfUrl =
    'https://firebasestorage.googleapis.com/v0/b/eng-tutor-app.appspot.com/o/materials%2Fmock%2FDemo%20Lesson%20Plan%20-%20Tutor%20Training.pdf?alt=media&token=9442249d-6bca-41d9-ad3e-83e6e4250349';

  return (
    <Document
      file={{
        url: pdfUrl
      }}
      onLoadSuccess={onDocumentLoadSuccess}
      loading={'loading'}
      options={options}>
      {Array.from(new Array(numPages), (el, index) => (
        <Page
          key={`page_${index + 1}`}
          pageNumber={index + 1}
          width={width < 500 ? width - 10 : width}
          height={422}
          scale={1}
        />
      ))}
    </Document>
  );
};

Error:

call:1 Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/eng-tutor-app.appspot.com/o/materials%2Fmock%2FDemo%20Lesson%20Plan%20-%20Tutor%20Training.pdf?alt=media&token=9442249d-6bca-41d9-ad3e-83e6e4250349' from origin 'https://app.e-english.com.au' 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.

build.umd.js:1233 
              
GET https://firebasestorage.googleapis.com/v0/b/eng-tutor-app.appspot.com/o/materials%2Fmock%2FDemo%20Lesson%20Plan%20-%20Tutor%20Training.pdf?alt=media&token=9442249d-6bca-41d9-ad3e-83e6e4250349 net::ERR_FAILED 200 (OK)