TurboTrades/PROXY_FIX_EXPLAINED.md

Admin Routes 404 Issue - Proxy Configuration Fix

🎯 Problem Identified

The admin routes were returning 404 Not Found errors even though:

• ✅ Backend was running
• ✅ User was authenticated as admin
• ✅ Routes were registered in the backend

🔍 Root Cause

The issue was in the AdminDebugPanel.vue component. It was making API calls with:

// WRONG - Bypasses Vite proxy
const response = await axios.get('/health', {
  baseURL: 'http://localhost:3000',  // ❌ Direct backend URL
  timeout: 5000,
});

Why This Caused 404 Errors

1. Vite Proxy Configuration (vite.config.js):

   proxy: {
     "/api": {
       target: "http://localhost:3000",
       changeOrigin: true,
     }
   }
   

   • This tells Vite: "When you see /api/*, proxy it to http://localhost:3000/api/*"

2. Axios Configuration (frontend/src/utils/axios.js):

   baseURL: import.meta.env.VITE_API_URL || '/api'
   

   • Default baseURL is /api
   • This works with the Vite proxy

3. AdminDebugPanel Issue:

   • It was overriding the baseURL to http://localhost:3000
   • This bypassed the Vite proxy completely
   • Requests went directly to backend, missing the /api prefix
   • Backend routes are at /api/admin/*, not /admin/*
   • Result: 404 Not Found

📊 Request Flow Comparison

❌ Before (Broken)

Frontend Request: GET /admin/config
↓
AdminDebugPanel override: baseURL = 'http://localhost:3000'
↓
Actual request: http://localhost:3000/admin/config
↓
Backend looks for: /admin/config (doesn't exist)
↓
Result: 404 Not Found

✅ After (Fixed)

Frontend Request: GET /admin/config
↓
Axios baseURL: /api
↓
Full path: /api/admin/config
↓
Vite Proxy intercepts: /api/*
↓
Proxies to: http://localhost:3000/api/admin/config
↓
Backend route exists: /api/admin/config ✅
↓
Result: 200 OK

🔧 The Fix

Changed AdminDebugPanel to use the same axios configuration as the rest of the app:

// ✅ CORRECT - Uses Vite proxy
const response = await axios.get('/health', {
  timeout: 5000,
  // No baseURL override - uses default from axios.js
});

Now the requests flow through the Vite proxy correctly:

• /admin/config → axios adds /api → /api/admin/config → proxy → backend ✅

🎓 Key Lessons

1. Never Override baseURL in Components

❌ Bad:

await axios.get('/endpoint', { baseURL: 'http://localhost:3000' })

✅ Good:

await axios.get('/endpoint')  // Uses configured baseURL

2. Understand the Request Path

In development with Vite:

Component: /admin/config
    ↓ (axios adds baseURL)
Axios: /api/admin/config
    ↓ (Vite proxy intercepts /api/*)
Proxy: http://localhost:3000/api/admin/config
    ↓
Backend: Receives /api/admin/config ✅

3. Production vs Development

Development (with Vite proxy):

• Frontend: http://localhost:5173
• Backend: http://localhost:3000
• Requests: /api/* → proxied to backend
• CORS: No issues (same origin due to proxy)

Production (no proxy):

• Frontend: https://yourdomain.com
• Backend: https://yourdomain.com/api or separate domain
• Requests: Direct to backend
• CORS: Must be configured on backend

📋 Checklist for Similar Issues

If you encounter 404 errors with API routes:

• Check if routes are registered in backend
• Check if server was restarted after adding routes
• Check the actual URL being requested (Network tab)
• Verify Vite proxy configuration
• Verify axios baseURL configuration
• Check for baseURL overrides in components
• Ensure /api prefix is consistent
• Test with curl to verify backend routes exist

🧪 Testing the Fix

1. Check Network Tab

Open DevTools (F12) → Network tab:

• URL should be: http://localhost:5173/api/admin/config
• Status should be: 200 OK (not 404)

2. Use Debug Panel

Navigate to /admin → Debug tab → Run Tests:

• All 4 tests should pass ✅
• No 404 errors

3. Manual Test

# This should work (proxied through Vite)
curl http://localhost:5173/api/admin/config

# This won't work in development (no /api prefix)
curl http://localhost:3000/admin/config  # 404

# This will work (correct backend path)
curl http://localhost:3000/api/admin/config

📝 Configuration Summary

Vite Proxy (vite.config.js)

proxy: {
  "/api": {
    target: "http://localhost:3000",
    changeOrigin: true,
  }
}

Axios Base URL (frontend/src/utils/axios.js)

baseURL: import.meta.env.VITE_API_URL || '/api'

Backend Routes (index.js)

await fastify.register(adminManagementRoutes, { prefix: "/api/admin" });

Component Usage

// ✅ Correct - No baseURL override
await axios.get('/admin/config')
// Becomes: /api/admin/config via proxy

// ❌ Wrong - Overrides baseURL
await axios.get('/admin/config', { baseURL: 'http://localhost:3000' })
// Becomes: http://localhost:3000/admin/config (bypasses proxy, 404)

🎉 Result

After the fix:

• ✅ All admin routes accessible
• ✅ Debug panel tests pass
• ✅ Config tab loads settings
• ✅ Users tab works
• ✅ No 404 errors
• ✅ Proxy working correctly

🔜 Prevention

To prevent this issue in the future:

1. Establish a pattern:

   • Always use the shared axios instance from @/utils/axios
   • Never override baseURL in components
   • Let the configuration handle URL construction

2. Code review checklist:

   • Check for baseURL overrides
   • Verify proxy paths are correct
   • Test API routes after adding new ones

3. Documentation:

   • Document the request flow
   • Explain proxy configuration
   • Provide examples of correct usage

📚 Related Files

• frontend/vite.config.js - Proxy configuration
• frontend/src/utils/axios.js - Axios setup
• frontend/src/components/AdminDebugPanel.vue - Fixed component
• index.js - Backend route registration
• routes/admin-management.js - Admin routes

---

Issue: Admin routes returning 404
Cause: baseURL override bypassing Vite proxy
Solution: Remove baseURL override, use default configuration
Status: ✅ Fixed and tested
Build: ✅ Successful