ljwx-stock/FRONTEND_DIAGNOSIS.md

Frontend API Connection Diagnosis

Issue Summary

Frontend at http://85.239.237.116:8090/ shows "Failed to fetch" error in browser console while accessing stock recommendations.

Diagnostic Findings

1. ✅ Frontend HTML Loads Correctly

curl http://85.239.237.116:8090/
# Response: HTTP 200 OK with HTML + assets loaded

2. ✅ Frontend Assets Load Correctly

GET /assets/index-CaMhKP1s.js    → 200 OK ✅
GET /assets/index-DDz5xBqI.css   → 200 OK ✅

3. ✅ API Endpoint Through Direct Backend Works

curl http://85.239.237.116:8001/api/recommendations
# Response: HTTP 200 OK + Full JSON with stock recommendations

4. ✅ API Endpoint Through Frontend Nginx Proxy Works

curl http://85.239.237.116:8090/api/recommendations
# Response: HTTP 200 OK + Full JSON (proxied correctly)

5. ✅ API Inside Frontend Container Works

docker compose exec frontend curl http://localhost/api/recommendations
# Response: HTTP 200 OK + Full JSON

6. ✅ CORS Headers Correct

curl -X OPTIONS -H "Origin: http://85.239.237.116:8090" http://85.239.237.116:8001/api/recommendations
# Response: HTTP 200 OK with proper CORS headers
access-control-allow-origin: http://85.239.237.116:8090
access-control-allow-methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
access-control-allow-headers: content-type

7. ✅ Built Frontend Has Correct API Path

docker compose exec frontend grep -r "/api" /usr/share/nginx/html/assets/index-*.js
# Result: /api path is embedded in built JS

What's Working

• Backend API endpoints ✅
• Nginx reverse proxy ✅
• Frontend HTML/CSS/JS assets ✅
• CORS headers ✅
• Direct curl requests from any host ✅

Possible Causes of Browser Error

The browser "Failed to fetch" error with:

1. Frontend HTML loads fine
2. API works via curl
3. CORS headers look correct

Possible causes:

1. Browser content security policy blocking fetch - Check browser console for CSP violations
2. Vue component not fully mounting - Check if Vue app actually initializes
3. API service not using correct URL - Check if /api path is correct in built app
4. Browser cache issue - Try hard refresh (Ctrl+Shift+R)
5. Mixed HTTP/HTTPS - Check if mixing protocols
6. CloudFlare or CDN blocking - If behind proxy

Test Steps for User

Option 1: Clear Browser Cache and Retry

// In browser console:
// 1. Clear cache: Ctrl+Shift+Del (Windows/Linux) or Cmd+Shift+Del (Mac)
// 2. Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
// 3. Open DevTools (F12)
// 4. Go to Network tab
// 5. Reload page
// 6. Look for /api/recommendations request
// 7. Check if it's red (failed) or green (200 OK)
// 8. If red, click it and check:
//    - Status code
//    - Response headers
//    - Error message

Option 2: Test Direct API Call in Browser

// In browser console:
fetch('http://85.239.237.116:8001/api/recommendations')
  .then(r => r.json())
  .then(d => console.log(d))
  .catch(e => console.log('Error:', e))

// Should either:
// - Return stock data (success) ✅
// - Show CORS error (expected from different origin)

Option 3: Test API Through Proxy in Browser

// In browser console:
fetch('/api/recommendations')
  .then(r => r.json())
  .then(d => console.log(d))
  .catch(e => console.log('Error:', e))

// Should return stock data (accessing through same origin)

Next Steps if Still Failing

1. Share browser console error - Screenshot or copy full error message
2. Check Firefox/Chrome DevTools Network tab:
   • Request URL
   • Request headers
   • Response status
   • Response body
3. Check nginx access logs:

   docker compose logs frontend | grep -i "GET /api"
   

4. Check if Vue app actually mounted:
   • Open DevTools Console
   • Check for errors
   • Check if #app div has content

Configuration Verification

Frontend API URL Configuration

Current: /api (relative path through nginx proxy) Backend: http://backend:8000 (docker network) Nginx listens on: 0.0.0.0:80 inside container, exposed as 8090 on host

CORS Configuration in Nginx

location /api/ {
    proxy_pass http://backend:8000;
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

CORS Configuration in Backend

app.add_middleware(
    CORSMiddleware,
    allow_origins=settings.cors_origins_list,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

System Architecture

Browser (Remote, e.g., 45.90.208.159)
    ↓
    HTTP GET http://85.239.237.116:8090/  → Nginx (port 8090)
    ↓
    [Nginx serves index.html + assets]
    ↓
    Browser runs Vue.js app
    ↓
    Vue.js calls: fetch('/api/recommendations')
    ↓
    HTTP GET http://85.239.237.116:8090/api/recommendations
    ↓
    Nginx reverse proxy (location /api/)
    ↓
    proxy_pass http://backend:8000/api/recommendations
    ↓
    Backend (FastAPI + CORS middleware)
    ↓
    HTTP 200 OK + JSON response

Summary

All infrastructure is working correctly:

• ✅ Backend serving API
• ✅ Nginx proxying correctly
• ✅ CORS headers sent
• ✅ Assets loading
• ✅ curl requests work

Most likely issue: Browser-specific problem (cache, CSP, security) or Vue component not properly initialized. Not an infrastructure issue.

Recommended fix: Try the test steps above to identify where exactly the request is failing.