I'm encountering a 401 error when trying to display source files (such as DOCX or text files) in my React app using the react-doc-viewer component. The error occurs during the request to my API, and I suspect it's because the cookie is not being sent along with the request.
Scenario: I have integrated the react-doc-viewer component into my React app to enable users to view source files. However, when making the request to my API endpoint, I receive a 401 error indicating an authentication issue.
Authentication Issue: Upon further investigation, I discovered that the cookie is not being sent to my API along with the request. The API relies on the presence of the cookie for authentication, and without it, the request is considered unauthorized.
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
export const FileViewer = (props) => {
const { path } = props;
const headers = { withCredentials: true };
const docs = [{ uri: path }];
console.log(path);
return (
<DocViewer
documents={docs}
pluginRenderers={DocViewerRenderers}
prefetchMethod="GET"
requestHeaders={headers}
/>
);
};