feat: Vercel serverless proxy for Dropbox (fix deploy issues) && update App.tsx

api/dropbox.ts

@@ -0,0 +1,53 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+    // Allow CORS
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
+    res.setHeader(
+        'Access-Control-Allow-Headers',
+        'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
+    );
+
+    if (req.method === 'OPTIONS') {
+        res.status(200).end();
+        return;
+    }
+
+    try {
+        // 1. Reconstruct the Target Dropbox URL
+        // The incoming request is to /api/dropbox/scl/fi/...
+        // We want to fetch https://www.dropbox.com/scl/fi/...
+
+        // req.url in Vercel function might be just the suffix or full path depending on routing
+        // Typically: /api/dropbox/scl/fi/xyz?dl=1
+
+        // We need to strip '/api/dropbox' from the start to get the dropbox path
+        const requestPath = req.url || '';
+        const dropboxPath = requestPath.replace(/^\/api\/dropbox/, ''); // e.g. /scl/fi/xyz?dl=1
+
+        const targetUrl = `https://www.dropbox.com${dropboxPath}`;
+
+        console.log(`Proxying to: ${targetUrl}`);
+
+        const response = await fetch(targetUrl);
+
+        if (!response.ok) {
+            throw new Error(`Dropbox responded with ${response.status} ${response.statusText}`);
+        }
+
+        // Forward the content type (likely text/csv)
+        const contentType = response.headers.get('content-type');
+        if (contentType) {
+            res.setHeader('Content-Type', contentType);
+        }
+
+        const data = await response.text();
+        res.status(200).send(data);
+
+    } catch (error) {
+        console.error('Proxy Error:', error);
+        res.status(500).json({ error: 'Failed to fetch data from Dropbox' });
+    }
+}