Fix Mixed Content issue on staging (HTTPS/HTTP mismatch)
- Add Next.js API rewrites to proxy /api and /uploads requests - Update docker-compose.staging.yml to use relative API paths - Set NEXT_PUBLIC_API_URL to empty for staging (use rewrites) - Add BACKEND_URL env var for Next.js server-side proxying - Update all files to use relative paths when API_URL is empty This fixes the issue where the staging site (HTTPS) was trying to load resources from HTTP backend, causing Mixed Content errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,12 +4,13 @@ services:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
args:
|
||||
- NEXT_PUBLIC_API_URL=http://192.168.0.202:8001
|
||||
- NEXT_PUBLIC_API_URL=
|
||||
container_name: autonet-frontend-staging
|
||||
ports:
|
||||
- "3001:3000"
|
||||
environment:
|
||||
- NODE_ENV=staging
|
||||
- BACKEND_URL=http://backend-staging:8000
|
||||
depends_on:
|
||||
- backend-staging
|
||||
restart: unless-stopped
|
||||
|
||||
@@ -28,10 +28,34 @@ const nextConfig = {
|
||||
hostname: '192.168.0.202',
|
||||
pathname: '/uploads/**',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'staging.autonetsellcar.com',
|
||||
pathname: '/uploads/**',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'autonetsellcar.com',
|
||||
pathname: '/uploads/**',
|
||||
},
|
||||
],
|
||||
},
|
||||
env: {
|
||||
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://192.168.0.202:8000',
|
||||
// Don't override empty string - it means use relative paths with rewrites
|
||||
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
|
||||
},
|
||||
async rewrites() {
|
||||
const backendUrl = process.env.BACKEND_URL || 'http://localhost:8000';
|
||||
return [
|
||||
{
|
||||
source: '/api/:path*',
|
||||
destination: `${backendUrl}/api/:path*`,
|
||||
},
|
||||
{
|
||||
source: '/uploads/:path*',
|
||||
destination: `${backendUrl}/uploads/:path*`,
|
||||
},
|
||||
];
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@@ -108,7 +108,7 @@ const FUEL_TYPES = [
|
||||
{ value: 'LPG', label: 'LPG' },
|
||||
];
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
// 이미지 URL 변환 (로컬 경로는 백엔드 URL 추가)
|
||||
const getImageUrl = (url: string | undefined): string => {
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface DealerApplication {
|
||||
id: number;
|
||||
|
||||
@@ -33,7 +33,7 @@ const defaultFormData: BannerFormData = {
|
||||
car_id: null,
|
||||
};
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
// 이미지 URL 변환 (로컬 경로는 백엔드 URL 추가)
|
||||
const getImageUrl = (url: string | undefined): string => {
|
||||
|
||||
@@ -42,7 +42,7 @@ interface ExchangeRateWeights {
|
||||
cny: number;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [settings, setSettings] = useState<SystemSettings | null>(null);
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useTranslation } from '@/lib/i18n';
|
||||
import { useTranslate } from '@/lib/useTranslate';
|
||||
|
||||
// 이미지 URL 변환 (로컬 경로는 백엔드 URL 추가)
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
const getImageUrl = (url: string | undefined): string => {
|
||||
if (!url) return '';
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
import SidebarLayout from '@/components/SidebarLayout';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface CCPackage {
|
||||
id: number;
|
||||
|
||||
@@ -6,7 +6,7 @@ import Link from 'next/link';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface CheckoutResult {
|
||||
status: string;
|
||||
|
||||
@@ -19,7 +19,7 @@ const CUSTOMS_FEE_USD = 200; // $200
|
||||
const SMALL_CAR_RATIO = 2.75; // 27.5% of total
|
||||
const COMPACT_CAR_RATIO = 2.25; // 22.5% of total
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
// Container matching simulation
|
||||
interface ContainerSlot {
|
||||
|
||||
@@ -6,7 +6,7 @@ import Link from 'next/link';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface DealerApplication {
|
||||
id: number;
|
||||
|
||||
@@ -6,7 +6,7 @@ import Link from 'next/link';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface DealerInfo {
|
||||
id: number;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface ExchangeRateData {
|
||||
currency_code: string;
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
import SidebarLayout from '@/components/SidebarLayout';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface VehicleShare {
|
||||
id: number;
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
import { authApi } from '@/lib/api';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { t, language } = useTranslation();
|
||||
|
||||
@@ -6,7 +6,7 @@ import Link from 'next/link';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { useTranslation, translateCarName } from '@/lib/i18n';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
interface SharedVehicleData {
|
||||
share: {
|
||||
|
||||
@@ -362,7 +362,7 @@ interface BannerCardProps {
|
||||
height: number;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
// 이미지 URL 변환 (로컬 경로는 백엔드 URL 추가)
|
||||
const getImageUrl = (url: string): string => {
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import axios from 'axios';
|
||||
import { Car, CarListResponse, CarMaker, CarModel, User, HeroBanner, HeroBannerSettings, CarView } from '@/types';
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
// When NEXT_PUBLIC_API_URL is empty, use relative path (for HTTPS proxy setup)
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL;
|
||||
const BASE_URL = API_URL ? `${API_URL}/api` : '/api';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: `${API_URL}/api`,
|
||||
baseURL: BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
@@ -931,7 +933,7 @@ export const ccApi = {
|
||||
// Get PDF URL for iframe/embed viewing
|
||||
getPerformanceCheckPdfUrl: (carId: number): string => {
|
||||
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
|
||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
return `${baseUrl}/api/carmodoo/car/${carId}/performance-check/pdf`;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
||||
|
||||
// Generate a simple session ID
|
||||
const generateSessionId = (): string => {
|
||||
|
||||
Reference in New Issue
Block a user