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:
+37
-8
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user