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:
+8
-3
@@ -7,15 +7,20 @@ COPY package*.json ./
|
||||
RUN npm ci --prefer-offline
|
||||
|
||||
COPY . .
|
||||
# The VITE_API_BASE env var can be set at build time to point to a different API endpoint.
|
||||
ARG VITE_API_BASE=https://crdc-api.civilytics.org/api/v1
|
||||
ENV VITE_API_BASE=${VITE_API_BASE}
|
||||
ARG VITE_PROXY_URL=""
|
||||
ENV VITE_PROXY_URL=${VITE_PROXY_URL}
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Serve with nginx (tiny image, ~5MB)
|
||||
# Stage 2: Serve with nginx (tiny image, ~5MB) + reverse proxy for API CORS bypass
|
||||
FROM nginx:alpine AS runtime
|
||||
|
||||
# Copy static site files
|
||||
COPY --from=builder /app/dist/ /usr/share/nginx/html/
|
||||
# Custom nginx config for SPA routing + caching headers
|
||||
|
||||
# Custom nginx config — serves static files AND proxies /api/v1/ to the CRDC API
|
||||
# with CORS headers, so browser-based requests work without preflight issues.
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
Reference in New Issue
Block a user