cors

frontend/src/preview/DocumentViewerPanel.jsx

@@ -108,14 +108,14 @@ const DocumentViewerPanel = ({
     setActiveTab('details');
   }, [document?.id, hasOcr, metadataPayload]);
 
-  const [ocrUrl, setOcrUrl] = useState(null);
+  const [ocrContent, setOcrContent] = useState(null);
   const [ocrLoading, setOcrLoading] = useState(false);
   const [ocrError, setOcrError] = useState(null);
 
   useEffect(() => {
     let cancelled = false;
     if (!document || !hasOcr || typeof getDocumentAsset !== 'function') {
-      setOcrUrl(null);
+      setOcrContent(null);
       setOcrLoading(false);
       setOcrError(null);
       return () => {
@@ -147,8 +147,41 @@ const DocumentViewerPanel = ({
         }
       }
 
+      let textContent = null;
+      if (!cancelled && url) {
+        const controller = new AbortController();
+
+        try {
+          const response = await fetch(url, {
+            method: 'GET',
+            mode: 'cors',
+            credentials: 'omit',
+            signal: controller.signal,
+          });
+
+          if (!response.ok) {
+            throw new Error(`Unexpected status: ${response.status}`);
+          }
+
+          textContent = await response.text();
+        } catch (error) {
+          if (!cancelled) {
+            console.error('[OCR] Failed to fetch text', error);
+            setOcrError('Unable to load OCR content.');
+          }
+        }
+
+        if (!cancelled) {
+          setOcrContent(textContent);
+        }
+
+        controller.abort();
+      }
+
       if (!cancelled) {
-        setOcrUrl(url);
+        if (!textContent) {
+          setOcrContent(null);
+        }
         setOcrLoading(false);
       }
     };
@@ -248,12 +281,10 @@ const DocumentViewerPanel = ({
                   <div className="document-viewer__message document-viewer__message--error">
                     {ocrError}
                   </div>
-                ) : ocrUrl ? (
-                  <iframe
-                    src={ocrUrl}
-                    title={`OCR content for ${document.title || document.original_name || 'document'}`}
-                    className="document-viewer__object document-viewer__object--ocr"
-                  />
+                ) : ocrContent ? (
+                  <pre className="document-viewer__object document-viewer__object--ocr-text">
+                    {ocrContent}
+                  </pre>
                 ) : (
                   <div className="document-viewer__message">No OCR content available.</div>
                 )}

frontend/src/styles.css

@@ -1006,6 +1006,17 @@ button.danger:hover:not([disabled]) {
   height: 100%;
 }
 
+.document-viewer__object--ocr-text {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 1rem 0;
+  font-size: 1rem;
+  white-space: pre-wrap;
+  font-family: inherit;
+}
+
 .document-viewer__message--error {
   color: var(--danger);
 }