51 lines
1.5 KiB
Markdown
51 lines
1.5 KiB
Markdown
# Proxy Configuration
|
|
|
|
This project uses a proxy to avoid CORS issues when fetching champion data from the Meraki Analytics CDN.
|
|
|
|
## Architecture
|
|
|
|
### Development (`ng serve`)
|
|
- Uses `proxy.conf.json` configuration
|
|
- Angular CLI dev server handles the proxy
|
|
- Requests to `/api/champions` are forwarded to the external CDN
|
|
|
|
### Production/SSR (`ng build` + `npm run serve:ssr:random-lol`)
|
|
- Uses `http-proxy-middleware` in `src/server.ts`
|
|
- Express server handles the proxy
|
|
- Same endpoint `/api/champions` works consistently
|
|
|
|
## How It Works
|
|
|
|
1. **Frontend** makes a request to `/api/champions` (relative URL)
|
|
2. **Proxy layer** (dev server or Express) intercepts the request
|
|
3. **External API** at `https://cdn.merakianalytics.com/riot/lol/resources/latest/en-US/champions.json` is called
|
|
4. **Response** is returned to the frontend as if it came from the same origin
|
|
|
|
## Benefits
|
|
|
|
- ✅ No CORS issues in development or production
|
|
- ✅ Consistent API endpoint across environments
|
|
- ✅ External API URL changes only need updates in proxy config
|
|
- ✅ Can add caching, rate limiting, or other middleware later
|
|
|
|
## Testing
|
|
|
|
### Development
|
|
```bash
|
|
npm start
|
|
# Visit http://localhost:4200
|
|
```
|
|
|
|
### Production SSR
|
|
```bash
|
|
npm run build
|
|
npm run serve:ssr:random-lol
|
|
# Visit http://localhost:4000
|
|
```
|
|
|
|
## Configuration Files
|
|
|
|
- `proxy.conf.json` - Development proxy configuration
|
|
- `src/server.ts` - Production SSR proxy implementation
|
|
- `angular.json` - References proxy config for `ng serve`
|