Fix CORS: add proxy support for browser-based API calls on git-pages
Deploy to git-pages / deploy (push) Successful in 20s

- Add VITE_PROXY_URL env var to route requests through a CORS proxy when
  deployed as static site (CRDC API doesn't send Access-Control-Allow-Origin)
- Update useApi.js, LoadingAnimation.jsx, and ChartPanel.jsx to respect proxy
- Add nginx.conf with /api/v1/ reverse proxy + CORS headers for Docker deployment
- Include proxy.php — simple PHP CORS proxy for git-pages hosts that support PHP
- Document CORS workaround in README

Without this fix, browser fetch() calls are blocked by same-origin policy and
the app shows a blank white screen despite serving correct HTML.
This commit is contained in:
2026-08-10 11:22:44 -04:00
parent 194208d817
commit 4ce64c7839
8 changed files with 155 additions and 30 deletions
+13 -2
View File
@@ -81,6 +81,11 @@ git-pages webhook receiver.
**URL**: `https://pages.civilytics.org/crdc-demo/`
> **CORS note**: The CRDC API (`crdc-api.civilytics.org`) does not send CORS headers. When deployed as a static site,
> browser-based fetch requests will be blocked by the same-origin policy. To fix this, deploy `proxy.php` to your git-pages host
> and set the `VITE_PROXY_URL` environment variable (e.g., `/crdc-demo/proxy.php`). The app automatically detects
> proxy availability — when unset, it attempts direct API calls (works via Docker/nginx or same-origin setups).
The workflow follows the same pattern as `Civilytics/sln-school-comparison`:
1. Triggers on push to `main` (only when source files change)
2. Builds with Node 22 + Vite (`npm ci && npm run build`)
@@ -89,8 +94,14 @@ The workflow follows the same pattern as `Civilytics/sln-school-comparison`:
> **Note**: Ensure `${{ secrets.GITHUB_TOKEN }}` is configured in repo settings on gitea.civilytics.org.
### Option B: Docker (self-hosted fleet)
Build and run the nginx container on your infrastructure (`efron`, `maxwell`, etc.):
### Option A.5: CORS Proxy for Git Pages
If you can't deploy PHP, create a simple reverse proxy in nginx or use an edge function that:
1. Accepts `?target=/api/v1/...` as a query parameter
2. Forwards the request to `https://crdc-api.civilytics.org/api/v1/...
3. Returns the response with `Access-Control-Allow-Origin: *`
4. Set `VITE_PROXY_URL` at build time to point at this endpoint.
### Option B: Docker (self-hosted fleet) — includes CORS proxy nginx config:
```bash
docker compose up -d # builds + serves on localhost:8080