Fix CORS: add proxy support for browser-based API calls on git-pages
Deploy to git-pages / deploy (push) Successful in 20s
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user