fix: configure nginx proxy for API calls to fix cross-origin issues
Some checks failed
CI/CD - Build & Test / Backend Tests (push) Has been cancelled
CI/CD - Build & Test / Frontend Tests (push) Has been cancelled
CI/CD - Build & Test / Security Scans (push) Has been cancelled
CI/CD - Build & Test / Docker Build Test (push) Has been cancelled
CI/CD - Build & Test / Terraform Validate (push) Has been cancelled
Deploy to Production / Build & Test (push) Has been cancelled
Deploy to Production / Security Scan (push) Has been cancelled
Deploy to Production / Build Docker Images (push) Has been cancelled
Deploy to Production / Deploy to Staging (push) Has been cancelled
Deploy to Production / E2E Tests (push) Has been cancelled
Deploy to Production / Deploy to Production (push) Has been cancelled
E2E Tests / Run E2E Tests (push) Has been cancelled
E2E Tests / Visual Regression Tests (push) Has been cancelled
E2E Tests / Smoke Tests (push) Has been cancelled

Problem:
Frontend was calling localhost:8000 for API, but when accessing
from Windows (192.168.254.79:8888), the browser tried to connect
to localhost on the Windows machine instead of the server.

Solution:
1. Added nginx.conf with proxy configuration for /api/ routes
2. Updated Dockerfile to copy nginx.conf to container
3. Changed api.ts baseURL from 'http://localhost:8000/api/v1' to '/api/v1'
4. Nginx now proxies all /api/ requests to backend:8000

This allows the frontend to work correctly from any client
by using relative paths that nginx proxies to the backend.
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-08 00:05:14 +02:00
parent 26037cf511
commit 1c6f0b5b61
3 changed files with 48 additions and 3 deletions

View File

@@ -23,8 +23,8 @@ FROM nginx:alpine
# Copy built assets # Copy built assets
COPY --from=builder /app/dist /usr/share/nginx/html COPY --from=builder /app/dist /usr/share/nginx/html
# Copy nginx config (optional) # Copy nginx config with API proxy
# COPY nginx.conf /etc/nginx/conf.d/default.conf COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80 EXPOSE 80

45
frontend/nginx.conf Normal file
View File

@@ -0,0 +1,45 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
# Proxy API requests to backend
location /api/ {
proxy_pass http://backend:8000/api/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
}
# Serve static files
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
# Handle client-side routing - serve index.html for all routes
location / {
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache";
}
# Health check endpoint
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
}
}

View File

@@ -1,7 +1,7 @@
import axios from 'axios'; import axios from 'axios';
const api = axios.create({ const api = axios.create({
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1', baseURL: '/api/v1',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },