@thead-vantage/react 2.9.0 → 2.11.0

package/README.md

@@ -510,3 +510,29 @@ import { fetchAdBanner, trackImpression, trackClick } from '@thead-vantage/react
 | Platform Developer | `localhost:3000` | `thead-vantage.com` | ❌ No (dev flags) | None (auto) |
 | Platform Developer | Custom platform | Custom URL | ✅ Yes | `NEXT_PUBLIC_THEAD_VANTAGE_API_URL` |
 | TheAd Vantage Dev | `localhost:3000` | `localhost:3001` | ❌ No | `NEXT_PUBLIC_THEAD_VANTAGE_DEV_MODE=true` |
+
+---
+
+## CORS Configuration for Production
+
+**Important**: The `thead-vantage.com` server needs to be configured to allow CORS requests from registered production platforms.
+
+### For Platform Developers
+
+When deploying your platform to production:
+
+1. **Contact TheAd Vantage support** to register your production domain(s)
+2. **Provide your production URLs** (e.g., `https://minotsbugle.com`, `https://www.minotsbugle.com`)
+3. **Verify CORS is working** by checking browser console for CORS errors
+
+The TheAd Vantage team will add your domains to the allowed origins list for your platform's API key.
+
+### For TheAd Vantage Platform Developers
+
+See `CORS_CONFIGURATION.md` for:
+- Database schema for storing allowed origins per platform
+- CORS middleware implementation examples
+- Security best practices
+- Testing procedures
+
+The CORS system allows each platform to have multiple allowed origins stored in the database, and the middleware validates requests against these origins before setting CORS headers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/AdBanner.tsx

@@ -83,7 +83,19 @@ export function AdBanner({
         }
       } catch (err) {
         console.error('[AdBanner] Error fetching ad:', err);
-        setError(err instanceof Error ? err.message : 'Failed to fetch ad');
+        
+        // For CORS errors, show user-friendly message but log technical details
+        if (err instanceof Error && err.message.includes('CORS error')) {
+          console.error('[AdBanner] CORS Error Details:', {
+            message: err.message,
+            note: 'This is a server-side configuration issue. The thead-vantage.com server needs to handle OPTIONS requests without redirecting. See CORS_CONFIGURATION.md for implementation details.',
+          });
+          // Show generic message to end users
+          setError('Ad unavailable');
+        } else {
+          // For other errors, show the error message
+          setError(err instanceof Error ? err.message : 'Failed to fetch ad');
+        }
       } finally {
         setLoading(false);
       }

package/src/lib/ads.ts

@@ -127,36 +127,76 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       searchParams.set('no_click_track', 'true'); // Prevent click tracking
     }
     
-    // Build the full URL - if apiBaseUrl already includes /api/ads, use it directly
-    // Otherwise append /api/ads
+    // Build the full URL - always make direct requests to thead-vantage.com
+    // Normalize URL to avoid redirects that cause CORS preflight issues
     let fullApiUrl = apiBaseUrl;
     if (!fullApiUrl.includes('/api/ads')) {
       fullApiUrl = fullApiUrl.replace(/\/$/, '') + '/api/ads';
     }
     
-    const url = `${fullApiUrl}?${searchParams.toString()}`;
+    // Normalize URL to HTTPS and ensure consistent format
+    // This prevents HTTP→HTTPS redirects that break CORS preflight
+    let normalizedUrl = fullApiUrl;
+    if (normalizedUrl.startsWith('http://')) {
+      normalizedUrl = normalizedUrl.replace('http://', 'https://');
+    }
+    // Ensure no trailing slash issues
+    normalizedUrl = normalizedUrl.replace(/\/api\/ads\/$/, '/api/ads');
+    
+    const url = `${normalizedUrl}?${searchParams.toString()}`;
     
     // Log the request (without exposing the API key)
     const logUrl = url.replace(new RegExp(`api_key=${params.apiKey}`, 'g'), 'api_key=***');
     console.log('[AdBanner] Fetching ad from:', logUrl);
 
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-    });
+    // Make direct request to thead-vantage.com
+    // Try to make a "simple request" that doesn't trigger preflight
+    // Simple requests don't trigger preflight if they:
+    // - Use GET, HEAD, or POST method
+    // - Only have simple headers (Accept, Accept-Language, Content-Language, Content-Type with specific values)
+    // - Don't have custom headers
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        mode: 'cors', // Explicitly enable CORS
+        credentials: 'omit', // Don't send cookies
+        headers: {
+          'Accept': 'application/json', // Simple header - shouldn't trigger preflight
+        },
+        redirect: 'manual', // Handle redirects manually to avoid preflight redirect issues
+        cache: 'no-cache',
+      });
 
-    if (!response.ok) {
-      throw new Error(`Failed to fetch ad: ${response.status} ${response.statusText}`);
-    }
+      // Handle redirects manually (if any)
+      if (response.type === 'opaqueredirect' || (response.status >= 300 && response.status < 400)) {
+        const location = response.headers.get('location');
+        if (location) {
+          // Follow the redirect for the actual request (not preflight)
+          const redirectUrl = location.startsWith('http') 
+            ? location 
+            : new URL(location, normalizedUrl).toString();
+          console.warn('[AdBanner] Server redirected request, following redirect:', redirectUrl.replace(new RegExp(`api_key=${params.apiKey}`, 'g'), 'api_key=***'));
+          // Recursively call with the redirect URL
+          return await fetchAdBanner({ ...params, apiUrl: redirectUrl });
+        }
+      }
 
-    const data: AdsResponse = await response.json();
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => 'Unknown error');
+        console.error('[AdBanner] API Error:', {
+          status: response.status,
+          statusText: response.statusText,
+          url: logUrl,
+          errorText: errorText.substring(0, 200), // Limit error text length
+        });
+        throw new Error(`Failed to fetch ad: ${response.status} ${response.statusText}`);
+      }
 
-    // Debug logging - log the FULL response to see exactly what we're getting
-    console.log('[AdBanner] Full API Response:', JSON.stringify(data, null, 2));
-    console.log('[AdBanner] API Response Summary:', {
+      const data: AdsResponse = await response.json();
+
+      // Debug logging - log the FULL response to see exactly what we're getting
+      console.log('[AdBanner] Full API Response:', JSON.stringify(data, null, 2));
+      console.log('[AdBanner] API Response Summary:', {
       success: data.success,
       hasAd: !!data.ad,
       hasAds: !!(data.ads && Array.isArray(data.ads)),
@@ -167,14 +207,14 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       adsType: data.ads ? (Array.isArray(data.ads) ? 'array' : typeof data.ads) : 'none',
     });
 
-    // Type guard to check if an object is Ad type (for arrays that might contain either)
-    const isAd = (obj: unknown): obj is Ad => {
+      // Type guard to check if an object is Ad type (for arrays that might contain either)
+      const isAd = (obj: unknown): obj is Ad => {
       if (typeof obj !== 'object' || obj === null) return false;
       return 'name' in obj && 'type' in obj && 'contentUrl' in obj && 'targetUrl' in obj;
     };
 
-    // Helper to convert AdData to Ad
-    const convertToAd = (adData: AdData): Ad => {
+      // Helper to convert AdData to Ad
+      const convertToAd = (adData: AdData): Ad => {
       return {
         id: adData.id,
         name: adData.alt || 'Ad',
@@ -186,16 +226,16 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       };
     };
 
-    // Helper to normalize ad type - "standard" should be treated as "image"
-    const normalizeAdType = (ad: Ad): Ad => {
+      // Helper to normalize ad type - "standard" should be treated as "image"
+      const normalizeAdType = (ad: Ad): Ad => {
       if (ad.type === 'standard' && ad.contentUrl) {
         return { ...ad, type: 'image' };
       }
       return ad;
     };
 
-    // Handle both single ad and array of ads
-    if (data.ads && Array.isArray(data.ads) && data.ads.length > 0) {
+      // Handle both single ad and array of ads
+      if (data.ads && Array.isArray(data.ads) && data.ads.length > 0) {
       // If we get an array, use the first ad and ensure it's Ad type
       const firstAd = data.ads[0];
       console.log('[AdBanner] Processing ads array, first ad:', JSON.stringify(firstAd, null, 2));
@@ -219,8 +259,8 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       };
     }
 
-    // Handle single ad response - convert AdData to Ad
-    if (data.ad) {
+      // Handle single ad response - convert AdData to Ad
+      if (data.ad) {
       console.log('[AdBanner] Processing single ad:', JSON.stringify(data.ad, null, 2));
       
       // Check if it's already in Ad format or needs conversion
@@ -244,8 +284,8 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       };
     }
 
-    // No ad found - log detailed info
-    console.warn('[AdBanner] No ad found in response:', {
+      // No ad found - log detailed info
+      console.warn('[AdBanner] No ad found in response:', {
       success: data.success,
       hasAd: !!data.ad,
       hasAds: !!(data.ads && Array.isArray(data.ads)),
@@ -254,33 +294,45 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       fullData: data,
     });
 
-    return {
-      success: data.success || false,
-      dev_mode: data.dev_mode,
-      _dev_note: data._dev_note || 'No ad data in response',
-      message: data.message || 'No ads available in response',
-    };
-  } catch (error) {
-    console.error('[AdBanner] Error fetching ad:', error);
-    
-    // In TheAd Vantage dev mode, return mock data
-    if (process.env.NEXT_PUBLIC_THEAD_VANTAGE_DEV_MODE === 'true') {
       return {
-        success: true,
-        dev_mode: true,
-        ad: {
-          id: 'dev-ad-1',
-          name: 'Development Ad',
-          type: 'image',
-          contentUrl: '/placeholder-ad.png',
-          targetUrl: '#',
-          width: 300,
-          height: 250,
-        },
-        message: 'TheAd Vantage dev mode: Using mock ad',
+        success: data.success || false,
+        dev_mode: data.dev_mode,
+        _dev_note: data._dev_note || 'No ad data in response',
+        message: data.message || 'No ads available in response',
       };
+    } catch (error) {
+      // Handle CORS errors specifically
+      if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
+        console.error('[AdBanner] CORS error detected. This usually means the server is redirecting preflight requests.');
+        console.error('[AdBanner] The server at thead-vantage.com needs to handle OPTIONS requests directly without redirecting.');
+        throw new Error('CORS error: The ad server is redirecting preflight requests. This needs to be fixed server-side. See CORS_CONFIGURATION.md for details.');
+      }
+      
+      console.error('[AdBanner] Error fetching ad:', error);
+      
+      // In TheAd Vantage dev mode, return mock data
+      if (process.env.NEXT_PUBLIC_THEAD_VANTAGE_DEV_MODE === 'true') {
+        return {
+          success: true,
+          dev_mode: true,
+          ad: {
+            id: 'dev-ad-1',
+            name: 'Development Ad',
+            type: 'image',
+            contentUrl: '/placeholder-ad.png',
+            targetUrl: '#',
+            width: 300,
+            height: 250,
+          },
+          message: 'TheAd Vantage dev mode: Using mock ad',
+        };
+      }
+      
+      throw error;
     }
-    
+  } catch (error) {
+    // Outer catch for any errors not caught by inner try-catch
+    console.error('[AdBanner] Unexpected error:', error);
     throw error;
   }
 }

package/src/lib/thead-vantage-config.ts

@@ -97,9 +97,31 @@ export function getApiBaseUrl(explicitApiUrl?: string): string {
     reason = 'production mode (default)';
   }
 
+  // Normalize the URL to avoid redirects that cause CORS preflight issues
+  if (selectedUrl) {
+    // Normalize to HTTPS (avoid HTTP→HTTPS redirects)
+    if (selectedUrl.startsWith('http://')) {
+      selectedUrl = selectedUrl.replace('http://', 'https://');
+    }
+    // Ensure consistent trailing slash handling
+    // Remove trailing slash, then ensure /api/ads is present
+    selectedUrl = selectedUrl.replace(/\/$/, '');
+    if (!selectedUrl.endsWith('/api/ads')) {
+      // If it doesn't end with /api/ads, add it
+      selectedUrl = selectedUrl + '/api/ads';
+    }
+  }
+
   // Log which URL was selected (helpful for debugging)
-  if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
-    console.log(`[TheAd Vantage] API Base URL selected: ${selectedUrl} (reason: ${reason})`);
+  // Always log in browser context, but only in development for server-side
+  if (typeof window !== 'undefined') {
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`[TheAd Vantage] API Base URL selected: ${selectedUrl} (reason: ${reason})`);
+    } else {
+      // In production, log to console but only if there's an issue (helps with debugging)
+      // We'll log errors separately, but this helps identify configuration issues
+      console.debug(`[TheAd Vantage] API Base URL: ${selectedUrl}`);
+    }
   }
 
   return selectedUrl;