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
+37 -8
View File
@@ -1,24 +1,53 @@
# nginx config for CRDC Arrests Demo — static SPA with proper caching.
# nginx config for CRDC Arrests Demo — static SPA + API reverse proxy with CORS.
# When served via Docker, this proxies /api/v1/ requests to the CRDC API server-side,
# adding Access-Control-Allow-Origin: * so browser-based fetch works without issues.
server {
listen 80;
server_name _;
# Proxy all /api/v1/ requests to the CRDC Arrest Rate API with CORS headers
location /api/v1/ {
proxy_pass https://crdc-api.civilytics.org/api/v1/;
proxy_set_header Host crdc-api.civilytics.org;
proxy_ssl_verify off;
# Add CORS headers so browser-based requests work
add_header Access-Control-Allow-Origin "*" always;
add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
add_header Access-Control-Allow-Headers "*" always;
if ($request_method = 'OPTIONS') {
return 204;
}
}
# Also support a simple proxy endpoint for git-pages-style deployments
location /crdc-demo/proxy/ {
# Extract the target path from query string and forward to CRDC API
proxy_pass https://crdc-api.civilytics.org$arg_target;
proxy_set_header Host crdc-api.civilytics.org;
proxy_ssl_verify off;
add_header Access-Control-Allow-Origin "*" always;
add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
}
# Serve static files from the Vite build output
root /usr/share/nginx/html;
root /usr/share/nginx/html/crdc-demo/; # Adjust if base is different
index index.html;
# Civilytics design tokens: immutable cache headers (data doesn't change between releases)
location / {
try_files $uri $uri/ /index.html;
}
# Civilytics design tokens: immutable cache headers for static assets
location ~* \.(js|css|png|jpg|jpeg|gif|svg|woff2|ttf)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
try_files $uri =404;
}
# SPA fallback — all routes serve index.html (client-side routing)
location / {
try_files $uri $uri/ /index.html;
}
# Health check endpoint for container orchestration
location /healthz {
access_log off;