37 lines
2.7 KiB
Markdown
37 lines
2.7 KiB
Markdown
# Handoff: Fix CORS for CRDC Arrests API Demo App
|
|
|
|
## Current Status
|
|
The demo app at `https://pages.civilytics.org/crdc-demo/` loads HTML correctly but shows a blank white screen because browser-based fetch requests to the CRDC API are blocked by CORS (the API doesn't send `Access-Control-Allow-Origin` headers).
|
|
|
|
## What's Done
|
|
1. ✅ **App code**: React + Vite app fully built with 6 charts, Civilytics visual identity, loading animation, district search — all committed and building cleanly
|
|
2. ✅ **Git Pages deployment**: Gitea Actions workflow (`.gitea/workflows/pages.yml`) successfully builds `dist/` and deploys to a `pages` branch on `Civilytics/crdc-demo` repo at gitea.civilytics.org
|
|
3. ✅ **CORS proxy code added**:
|
|
- Updated `src/hooks/useApi.js`, `LoadingAnimation.jsx`, `ChartPanel.jsx` with `VITE_PROXY_URL` support (routes through a query-param-based proxy)
|
|
- Added `proxy.php` — simple PHP CORS proxy for git-pages hosts that support PHP
|
|
- Updated Dockerfile nginx.conf to include `/api/v1/` reverse proxy with CORS headers
|
|
|
|
## What Needs to Be Done Next
|
|
|
|
### Option A: Fix at the API source (recommended, cleanest)
|
|
The CRDC API is a Plumber/R service deployed behind Cloudflare. The code change has already been made in `crdc-arrests/api/plumber.R` — added CORS headers (`Access-Control-Allow-Origin: *`) to the existing `cacheHeaders` filter and OPTIONS preflight handling.
|
|
|
|
**Action needed**: Deploy this updated plumber.R to the running API server so it takes effect at https://crdc-api.civilytics.org/. The change is in `/home/jared/Nextcloud/Civilytics/Code/Civilytics/crdc-arrests/api/plumber.R` (lines 56-78).
|
|
|
|
### Option B: Fix on the git-pages server
|
|
If you can't restart the API, configure the nginx serving `pages.civilytics.org` to add CORS headers when proxying requests to `crdc-api.civilytics.org`. Or deploy `proxy.php` and set `VITE_PROXY_URL=/crdc-demo/proxy.php` at build time.
|
|
|
|
## Key Files
|
|
- **API fix**: `/home/jared/Nextcloud/Civilytics/Code/Civilytics/crdc-arrests/api/plumber.R` (CORS headers added to cacheHeaders filter)
|
|
- **App code**: `/home/jared/Nextcloud/Civilytics/Code/Civilytics/crdc-demo/src/` — fully built, deployed to pages branch
|
|
- **Proxy fallback**: `proxy.php`, nginx.conf with reverse proxy config
|
|
|
|
## Verification Steps After Fix
|
|
1. Visit https://pages.civilytics.org/crdc-demo/
|
|
2. Select a state → search for "Denver" → should see district results
|
|
3. Click a district → loading animation runs, then 6 charts appear
|
|
4. Check browser dev tools → no CORS errors in console
|
|
|
|
## Git Status
|
|
- `crdc-arrests` repo: plumber.R modified (CORS headers added), not yet committed/pushed to API deployment
|
|
- `crdc-demo` repo: All fixes pushed and deployed via Gitea Actions, awaiting CORS resolution at API or server level |