@thead-vantage/react 2.10.0 → 2.12.0

package/README.md

@@ -31,7 +31,7 @@ The TheAd Vantage integration supports multiple modes of operation to accommodat
 **Use Case**: Platform developers using the component in production deployments.
 
 **Behavior**: 
-- Connects to `https://thead-vantage.com/api/ads`
+- Connects to `https://www.thead-vantage.com/api/ads` (uses www to avoid 308 redirects)
 - Full tracking enabled (impressions and clicks are recorded)
 - No configuration required
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.10.0",
+  "version": "2.12.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

@@ -168,16 +168,26 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       });
 
       // Handle redirects manually (if any)
+      // Note: 308 redirects at Vercel edge level will still break CORS preflight
+      // This handles redirects for the actual GET request, but preflight redirects are blocked by browser
       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)
+          // Extract the redirect URL
           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=***'));
+          
+          console.warn('[AdBanner] Server redirected request (status:', response.status, '), following redirect:', redirectUrl.replace(new RegExp(`api_key=${params.apiKey}`, 'g'), 'api_key=***'));
+          console.warn('[AdBanner] Note: If this is a 308 redirect, it may break CORS preflight. Consider using the canonical domain directly.');
+          
           // Recursively call with the redirect URL
-          return await fetchAdBanner({ ...params, apiUrl: redirectUrl });
+          // Limit recursion to prevent infinite loops
+          const redirectCount = (params as any).__redirectCount || 0;
+          if (redirectCount >= 3) {
+            throw new Error('Too many redirects. The server may be misconfigured.');
+          }
+          return await fetchAdBanner({ ...params, apiUrl: redirectUrl, __redirectCount: redirectCount + 1 } as any);
         }
       }
 
@@ -303,9 +313,22 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
     } 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.');
+        // Check if this might be a 308 redirect issue
+        // Vercel redirects thead-vantage.com → www.thead-vantage.com at edge level
+        // This breaks CORS preflight because browsers don't allow redirects on OPTIONS requests
+        const isRedirectIssue = normalizedUrl.includes('thead-vantage.com') && !normalizedUrl.includes('www.');
+        
+        if (isRedirectIssue) {
+          console.error('[AdBanner] CORS error detected. This appears to be a 308 redirect issue.');
+          console.error('[AdBanner] The domain thead-vantage.com redirects to www.thead-vantage.com at Vercel edge level.');
+          console.error('[AdBanner] This breaks CORS preflight requests because browsers block redirects on OPTIONS requests.');
+          console.error('[AdBanner] Solution: Use www.thead-vantage.com directly (library has been updated to do this).');
+          throw new Error('CORS error: 308 redirect detected. The server redirects thead-vantage.com → www.thead-vantage.com, which breaks CORS preflight. The library now uses www.thead-vantage.com by default. If you see this error, check your API URL configuration.');
+        } else {
+          console.error('[AdBanner] CORS error detected. This usually means the server is redirecting preflight requests.');
+          console.error('[AdBanner] The server 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);

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

@@ -85,16 +85,19 @@ export function getApiBaseUrl(explicitApiUrl?: string): string {
 
   // Priority 4: Localhost development (platform developers on localhost)
   // Use production API but will add dev flags to prevent tracking
+  // Use www.thead-vantage.com to avoid 308 redirects
   if (!selectedUrl && isLocalhost()) {
-    selectedUrl = 'https://thead-vantage.com/api/ads';
-    reason = 'localhost detection (production API with dev flags)';
+    selectedUrl = 'https://www.thead-vantage.com/api/ads';
+    reason = 'localhost detection (production API with dev flags - using www to avoid redirects)';
   }
 
   // Priority 5: Production mode (default)
   // Platform developers use this by default in production
+  // IMPORTANT: Use www.thead-vantage.com to avoid 308 redirects at Vercel edge
+  // Vercel redirects thead-vantage.com → www.thead-vantage.com, which breaks CORS preflight
   if (!selectedUrl) {
-    selectedUrl = 'https://thead-vantage.com/api/ads';
-    reason = 'production mode (default)';
+    selectedUrl = 'https://www.thead-vantage.com/api/ads';
+    reason = 'production mode (default - using www to avoid redirects)';
   }
 
   // Normalize the URL to avoid redirects that cause CORS preflight issues