fix: resolve CORS issue for mask images by proxying through Next.js rewrites

components/DynamicLogo.tsx

@@ -21,14 +21,15 @@ export default function DynamicLogo({
 }: DynamicLogoProps) {
   
   const imageUrl = src.startsWith('/') ? openinaryLoader({ src, width: 800 }) : src;
+  const proxiedUrl = imageUrl.replace('https://media.ayris.tech', '/media-proxy');
 
   return (
     <div
       className={className}
       style={{
         backgroundColor: color,
-        maskImage: `url(${imageUrl})`,
+        maskImage: `url(${proxiedUrl})`,
-        WebkitMaskImage: `url(${imageUrl})`,
+        WebkitMaskImage: `url(${proxiedUrl})`,
         maskRepeat: "no-repeat",
         maskPosition: "center",
         maskSize: size,

next.config.ts

@@ -28,6 +28,14 @@ const nextConfig: NextConfig = {
         ],
     },
     output: 'standalone',
+    async rewrites() {
+        return [
+            {
+                source: '/media-proxy/:path*',
+                destination: 'https://media.ayris.tech/:path*',
+            },
+        ];
+    },
 };
 
 export default nextConfig;