unable to load file from remote url

[ASalman-Malik]

const Pdf = (props) => {
console.log("Props from PDF", props.data);
const [open, setOpen] = useState(false);
const [pdf, setPdf] = useState(null);
const handleOpen = (p) => {
// console.log("open modal", p);
setPdf(${BASE_PATH} + p.data.pdf_url);
setOpen(true);
};
const handleClose = () => {
// setPageNumber(1)
setOpen(false);
};
const handlePrint = (p) => {
// event.preventDefault()
if ("check user is logged in or not") {
//if found use show
} else {
//redirect to login
}
window.open(
${BASE_PATH} + p.data.pdf_url,
"PRINT",
"height=auto,width=auto"
); //currently printing a static doc file
};
console.log("Pdf url", pdf);
const defaultLayoutPluginInstance = defaultLayoutPlugin();
return (

<Card
sx={{
maxWidth: 320,
borderRadius: "12px",
padding: "12px",
}}
>

<CardMedia
component="img"
alt="green iguana"
height="140"
image={${BASE_PATH} + props.data.thumbnail}
// image={i}
// sx={{ borderRadius: 12 }}
style={{ borderRadius: "12px" }}
/>


<Typography
noWrap
style={{
maxLines: 2,
color: "#000",
lineHeight: "1.4",
}}
gutterBottom
variant="h6"
component="div"
>
{props.data.name}

<Typography
flexWrap={1}
style={{ maxLines: 2, textAlign: "" }}
variant="body2"
color="text.secondary"
>
{props.data.description}
{/* {d.desc.length > 40 ? ${d.desc.substring(0, 60)}... : d.desc} /}

{props.data.date ? (
<Typography style={{ marginTop: 12, color: "#bab8b8" }}>
<CalendarMonthOutlinedIcon
style={{ marginRight: 5, marginBottom: 4 }}
/>
{props.data.date}

) : (
""
)}



<PictureAsPdfIcon
sx={{ color: "#e8212e" }}
onClick={() => handleOpen(props)}
/>


{" "}
<LocalPrintshopIcon
sx={{ color: "#bab8b8" }}
onClick={() => handlePrint(props)}
/>

{/ <Icon
style={{
height: "34px",
width: "34px",
}}
>
<img
src={share}
style={{ height: "23px", marginRight: 8, float: "right" }}
onClick={() => console.log("Share")}
alt=""
/>
*/}

  <Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
    style={{ height: "80vh" }}
  >
    <Box sx={{ style }}>
      <Button onClick={handleClose} color="error" variant="contained">
        Close
      </Button>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.3.122/build/pdf.worker.min.js">
        <div
          style={{
            border: "1px solid rgba(0, 0, 0, 0.3)",
            height: "100vh",
          }}
        >
          <Viewer
            plugins={[defaultLayoutPluginInstance]}
            httpHeaders={{
              "Access-Control-Allow-Origin": "*",
            }}
            fileUrl={pdf}
          />
        </div>
      </Worker>
    </Box>
  </Modal>
</div>

);
};

export default Pdf;

===============The Error: ================
localhost/:1 Access to fetch at 'https://demoquaeretech.in/public/uploads/1676019275CiplaMed%20-%20Dyslipidemia%20(Essence%20Series)%20-%202022-11-23.pdf' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

this is my code it works fine when i load a local file but get cors error with remote url but the url is loading fine when i copy and paste path in browser url. need help Urgent!