SFS/NGROK_FIX.md

Ngrok CORS/Mixed Content Fix

Problem

When accessing the website through ngrok (HTTPS), you were getting:

Console TypeError: Failed to fetch

Root Cause

1. Mixed Content Issue: Ngrok serves your site over HTTPS, but your components were making direct HTTP requests to Strapi (http://160.187.167.213). Browsers block HTTP requests from HTTPS pages for security reasons.

2. CORS Issues: Even if the protocol matched, Strapi might not be configured to allow requests from the ngrok domain.

3. Client-Side Fetching: All components were making API calls directly from the browser, which exposes your Strapi URL and causes CORS/mixed content issues.

Solution

Created Next.js API routes that act as a proxy between your frontend and Strapi:

New API Routes Created:

• /api/logo - Fetches logo data
• /api/main-hero - Fetches main hero content
• /api/testimonials - Fetches testimonials
• /api/trusted-by - Fetches trusted-by section data
• /api/offerings - Fetches offerings data
• /api/footer - Fetches all footer data (consolidated 7 API calls into 1)

Components Updated:

• ✅ navbar.tsx - Now uses /api/logo
• ✅ main-hero.tsx - Now uses /api/main-hero
• ✅ hero-section.tsx - Already uses /api/whysfs (no change needed)
• ✅ testimonials.tsx - Now uses /api/testimonials
• ✅ trusted-by.tsx - Now uses /api/trusted-by
• ✅ footer.tsx - Now uses /api/footer (consolidated 7 calls into 1)
• ✅ our-offerings.tsx - Server component, no CORS issue (kept direct Strapi call)

Benefits

1. No More CORS Errors: All requests go through Next.js server, which doesn't have CORS restrictions
2. No Mixed Content Issues: Server-to-server communication doesn't have protocol restrictions
3. Better Performance:
   • API routes are cached (5 minutes)
   • Footer consolidated from 7 calls to 1
   • Reduced network overhead
4. Security: Strapi URL is no longer exposed to the browser
5. Easier Debugging: All API calls go through Next.js, easier to log and debug

Testing

After these changes, your website should work correctly when accessed through ngrok. The API routes handle all the communication with Strapi server-side, avoiding browser security restrictions.

Next Steps (Optional Improvements)

1. Add Error Handling: Add retry logic and better error messages
2. Add Loading States: Show loading indicators while data is being fetched
3. Optimize Caching: Adjust cache times based on how often content changes
4. Add Request Logging: Log API calls for debugging in production

Environment Variables

Make sure your .env.local has:

NEXT_PUBLIC_STRAPI_BASE_URL=http://160.187.167.213

The API routes use this to connect to Strapi server-side.