fix: Configure Vite proxy to eliminate CORS issues in development
Implemented a comprehensive CORS proxy solution that works with both
local and remote backends during development.
## Changes
### Vite Configuration (vite.config.ts)
- Use loadEnv() to properly read VITE_API_BASE_URL from .env
- Configure proxy to forward /api/* requests to backend
- Add detailed logging for proxy requests and responses
- Support changeOrigin, rewrite, secure=false, and websockets
### API Client (src/lib/api/client.ts)
- In development: Always use /api prefix (proxied)
- In production: Use direct VITE_API_BASE_URL
- Add console logging to show proxy configuration in dev mode
- Automatic detection of environment (DEV vs PROD)
### Error Handling (route loaders)
- Fix console.error() calls that caused TypeError with circular refs
- Use error.message instead of logging full error objects
- Affects: +page.ts, matches/+page.ts
### Documentation
- docs/LOCAL_DEVELOPMENT.md: Complete rewrite with proxy explanation
- Quick start guide for both production API and local backend
- Detailed proxy flow diagrams
- Comprehensive troubleshooting section
- Clear examples and logs
- docs/CORS_PROXY.md: Technical deep-dive on proxy implementation
- How the proxy works internally
- Configuration options explained
- Testing procedures
- Common issues and solutions
- .env.example: Updated with proxy documentation
## How It Works
Development Flow:
1. Frontend makes request: /api/matches
2. Vite proxy intercepts and forwards to: ${VITE_API_BASE_URL}/matches
3. Backend responds (no CORS headers needed)
4. Proxy returns response to frontend (same-origin)
Production Flow:
1. Frontend makes request directly to: https://api.csgow.tf/matches
2. Backend responds with CORS headers
3. Browser allows request (CORS enabled on backend)
## Benefits
✅ No CORS errors in development
✅ Works with local backend (localhost:8000)
✅ Works with remote backend (api.csgow.tf)
✅ Simple configuration (just set VITE_API_BASE_URL)
✅ Detailed logging for debugging
✅ Production build unaffected (direct requests)
## Testing
Verified with production API:
- curl https://api.csgow.tf/matches ✓
- Dev server proxy logs show successful forwarding ✓
- Browser Network tab shows /api/* requests ✓
- No CORS errors in console ✓
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -5,13 +5,28 @@ import { APIException } from '$lib/types';
|
||||
/**
|
||||
* API Client Configuration
|
||||
*/
|
||||
const API_BASE_URL =
|
||||
typeof window !== 'undefined'
|
||||
? import.meta.env?.VITE_API_BASE_URL || 'http://localhost:8000'
|
||||
: 'http://localhost:8000';
|
||||
const getAPIBaseURL = (): string => {
|
||||
// In production builds, use the configured URL directly
|
||||
if (import.meta.env.PROD) {
|
||||
return import.meta.env?.VITE_API_BASE_URL || 'https://api.csgow.tf';
|
||||
}
|
||||
|
||||
// In development mode, ALWAYS use the Vite proxy to avoid CORS issues
|
||||
// The proxy will forward /api requests to VITE_API_BASE_URL
|
||||
// This works regardless of whether the backend is local or remote
|
||||
return '/api';
|
||||
};
|
||||
|
||||
const API_BASE_URL = getAPIBaseURL();
|
||||
const API_TIMEOUT = Number(import.meta.env?.VITE_API_TIMEOUT) || 10000;
|
||||
|
||||
// Log the API configuration in development
|
||||
if (import.meta.env.DEV) {
|
||||
console.log('[API Client] Development mode - using Vite proxy');
|
||||
console.log('[API Client] Frontend requests: /api/*');
|
||||
console.log('[API Client] Proxy target:', import.meta.env?.VITE_API_BASE_URL || 'http://localhost:8000');
|
||||
}
|
||||
|
||||
/**
|
||||
* Base API Client
|
||||
* Provides centralized HTTP communication with error handling
|
||||
|
||||
Reference in New Issue
Block a user