fix: #185

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";

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