fix: Add backend proxy for GLB files to resolve CORS in ImageTo3DModal

backend/server.js

@@ -246,6 +246,22 @@ app.post('/api/users/deduct-credit', authenticate, async (req, res) => {
   }
 });
 
+// 9.5 Proxy for downloading GLB files to fix CORS issues in frontend viewers
+app.get('/api/proxy/glb', async (req, res) => {
+  const { url } = req.query;
+  if (!url) return res.status(400).json({ error: 'URL required' });
+  try {
+    const response = await axios.get(url, { responseType: 'stream' });
+    res.setHeader('Content-Type', 'model/gltf-binary');
+    // Add CORS headers for the frontend to easily fetch it
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    response.data.pipe(res);
+  } catch (err) {
+    console.error('Proxy error:', err.message);
+    res.status(500).json({ error: 'Failed to proxy file' });
+  }
+});
+
 // 10. Upload file
 app.post('/api/upload', authenticate, upload.single('file'), (req, res) => {
   if (!req.file) return res.status(400).json({ error: 'No file uploaded' });

src/components/ImageTo3DModal.tsx

@@ -575,7 +575,7 @@ export const ImageTo3DModal: React.FC<ImageTo3DModalProps> = ({ isOpen, onClose,
                       {generatedModelUrl ? (
                         <>
                           <div className="absolute inset-0">
-                            <ModelPreview url={generatedModelUrl} />
+                            <ModelPreview url={`/api/proxy/glb?url=${encodeURIComponent(generatedModelUrl)}`} />
                           </div>
                           <div className="absolute top-3 right-3 flex gap-2 z-10">
                              <a href={generatedModelUrl} download="model.glb" target="_blank" className="p-2 bg-zinc-900/80 hover:bg-zinc-800 backdrop-blur rounded-lg border border-zinc-700 transition-colors text-zinc-300">