From c8b7378b7025114e07e0af9217b843ab56c1441f Mon Sep 17 00:00:00 2001
From: Hk-Gosuto <yominogosuto@gmail.com>
Date: Sun, 11 Feb 2024 10:13:30 +0800
Subject: [PATCH] fix: #185

---
 app/api/cors/route.ts       | 37 +++++++++++++++++++++++++++++++++++++
 app/components/exporter.tsx | 13 ++++++++++++-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 app/api/cors/route.ts

diff --git a/app/api/cors/route.ts b/app/api/cors/route.ts
new file mode 100644
index 000000000..4fadd2608
--- /dev/null
+++ b/app/api/cors/route.ts
@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+
+async function handle(req: NextRequest) {
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const targetUrl = req.nextUrl.searchParams.get("url");
+
+  if (!targetUrl) {
+    return NextResponse.json({ body: "Bad Url" }, { status: 500 });
+  }
+
+  const method = req.headers.get("method") ?? undefined;
+  const fetchOptions: RequestInit = {
+    headers: {
+      authorization: req.headers.get("authorization") ?? "",
+    },
+    method,
+    // @ts-ignore
+    duplex: "half",
+  };
+
+  const fetchResult = await fetch(targetUrl, fetchOptions);
+
+  console.log("[Any Proxy]", targetUrl, {
+    status: fetchResult.status,
+    statusText: fetchResult.statusText,
+  });
+
+  return fetchResult;
+}
+
+export const GET = handle;
+export const OPTIONS = handle;
+
+export const runtime = "edge";
diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index 63330c4b9..1c2cdf0c4 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -515,6 +515,17 @@ export function ImagePreviewer(props: {
     }
   };
 
+  const markdownImageUrlCorsProcess = (markdownContent: string) => {
+    const updatedContent = markdownContent.replace(
+      /!\[.*?\]\((.*?)\)/g,
+      (match, url) => {
+        const updatedURL = `/api/cors?url=${encodeURIComponent(url)}`;
+        return `![image](${updatedURL})`;
+      },
+    );
+    return updatedContent;
+  };
+
   return (
     <div className={styles["image-previewer"]}>
       <PreviewActions
@@ -580,7 +591,7 @@ export function ImagePreviewer(props: {
 
               <div className={styles["body"]}>
                 <Markdown
-                  content={m.content}
+                  content={markdownImageUrlCorsProcess(m.content)}
                   imageBase64={m.image_url}
                   fontSize={config.fontSize}
                   defaultShow