Question
Adobe Embed API CORS error
I am using the correct API key for my registered domain zippiai.app
The pdfs are also hosted on the same domain. I am thrown a cors error.
This is my react component code:
import React, { useEffect } from "react";
import { Grid, Paper } from "@6210586/material";
function DocDisplaySection({
pdfDocument,
noteDocument,
sourceDocument,
pageNumber,
sliderValue,
}) {
useEffect(() => {
if (!window.AdobeDC) {
console.error(
"Adobe PDF Embed API not loaded. Check script in index.html"
);
return;
}
let selectedDocument;
let url;
let fileName;
if (pdfDocument) {
selectedDocument = pdfDocument;
url = `${process.env.REACT_APP_API}/${selectedDocument.filePath.slice(
8
)}`;
fileName = pdfDocument.fileName;
} else if (noteDocument) {
selectedDocument = noteDocument;
url = `${process.env.REACT_APP_API}/${selectedDocument.filePath.slice(
8
)}`;
fileName = noteDocument.fileName;
} else if (sourceDocument) {
selectedDocument = sourceDocument;
url = `${process.env.REACT_APP_API}/${selectedDocument.slice(8)}`;
fileName = "source";
}
if (selectedDocument) {
new window.AdobeDC.View({
clientId: `${process.env.ADOBE_PDF_EMBED_API_KEY}`,
divId: "adobe-dc-view",
})
.previewFile({
content: {
location: {
url: url,
},
},
metaData: { fileName: fileName },
})
.then((adobeViewer) => {
adobeViewer.getAPIs().then((apis) => {
apis
.gotoLocation(pageNumber)
.catch((error) => console.error(error));
});
});
}
}, [pdfDocument, noteDocument, sourceDocument, pageNumber]);
return (
<Grid item xs={12} sm={12} md={sliderValue}>
<Paper
elevation={3}
style={{
width: "100%",
height: `calc(100vh - 130px)`,
}}
>
<div id="adobe-dc-view" style={{ width: "100%", height: "100%" }}></div>
</Paper>
</Grid>
);
}
export default DocDisplaySection;
AdChoices