cors

docs/s3_cors_presign.md

@@ -0,0 +1,56 @@
+# Bucket CORS for Presigned Asset Fetches
+
+The frontend loads certain assets (e.g. OCR text) with `fetch()` against their presigned URLs
+(see `frontend/src/preview/DocumentViewerPanel.jsx`). Browsers will block that request unless
+the storage bucket sends CORS headers that allow the frontend origin. Configure a rule that
+includes:
+
+* the list of allowed origins (your production, staging, or local domains)
+* `GET` (and optionally other methods you expose)
+* permissive request headers (usually `"*"` is fine for presigned URLs)
+* exposed response headers if the frontend needs them (`etag`, `content-length`, etc.)
+
+## Example CORS document
+
+```json
+{
+  "CORSRules": [
+    {
+      "AllowedOrigins": ["https://app.example"],
+      "AllowedMethods": ["GET"],
+      "AllowedHeaders": ["*"],
+      "ExposeHeaders": ["etag", "content-length", "content-type"],
+      "MaxAgeSeconds": 300
+    }
+  ]
+}
+```
+
+Replace `https://app.example` with each domain that must fetch presigned assets. Add additional
+rules if different origins require different methods.
+
+## Applying the rule
+
+### AWS S3 CLI
+```bash
+aws s3api put-bucket-cors \
+  --bucket <bucket-name> \
+  --cors-configuration file://cors.json \
+  [--endpoint-url <custom-endpoint>]
+```
+Save the JSON payload as `cors.json`. When targeting S3-compatible providers (e.g. Hetzner, Ceph RGW),
+pass their endpoint via `--endpoint-url`.
+
+### s3cmd (Ceph RGW / generic S3)
+```bash
+s3cmd setcors cors.json s3://<bucket-name>
+```
+
+### MinIO Client (`mc`)
+```bash
+mc alias set storage <endpoint> <access-key> <secret-key>
+mc anonymous set-json storage/<bucket-name> cors.json
+```
+
+Most dashboards expose a similar form—paste the JSON rule into the CORS section for the bucket.
+Once the rule is active, browsers will allow the frontend to read presigned assets with fetch().

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);
 }