fix: image editor not working in edit form

backend/next.config.ts

@@ -13,6 +13,14 @@ const nextConfig: NextConfig = {
 					{ key: "Access-Control-Allow-Headers", value: "Content-Type" },
 				],
 			},
+			{
+				// for images
+				source: "/mii/:path*",
+				headers: [
+					{ key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_FRONTEND_URL || "http://localhost:4321" },
+					{ key: "Access-Control-Allow-Credentials", value: "true" },
+				],
+			},
 		];
 	},
 };

frontend/src/components/submit-form/image-editor.tsx

@@ -92,7 +92,7 @@ export default function ImageEditorPortrait({ isOpen, setIsOpen, image, setImage
 
 				<div className="relative w-full flex justify-center">
 					<ReactCrop crop={crop} onChange={(c) => setCrop(c)} className="rounded-2xl border-2 border-amber-500 overflow-hidden max-h-96">
-						<img ref={imageRef} src={image} />
+						<img ref={imageRef} src={image} crossOrigin="anonymous" />
 					</ReactCrop>
 					<canvas ref={canvasRef} className="hidden" />
 				</div>