Erreurs API & reseau

Access to fetch at 'https://api.example.com/data'
from origin 'http://localhost:3000'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

# En clair : le serveur api.example.com n'autorise pas
# les requetes depuis localhost:3000

// CAS 1 : Tu controles le serveur (API Route Next.js)
// -> Ajouter les headers CORS dans ta route
export async function GET() {
  return new Response(JSON.stringify({ data: "ok" }), {
    headers: {
      'Access-Control-Allow-Origin': '*', // Ou ton domaine specifique
      'Content-Type': 'application/json',
    },
  })
}

// CAS 2 : Tu ne controles PAS le serveur
// -> Passer par une API Route proxy
// app/api/proxy/route.ts
export async function GET() {
  // Pas de CORS ici car c'est du serveur-a-serveur
  const res = await fetch('https://api-externe.com/data')
  const data = await res.json()
  return Response.json(data)
}

// CAS 3 : En dev seulement
// -> next.config.ts avec rewrites
// Voir la doc Next.js pour les rewrites

// Le reflexe : verifier CHAQUE partie de l'URL

// 1. Le domaine
const baseUrl = process.env.NEXT_PUBLIC_API_URL  // Vide en prod ?
console.log("Base URL:", baseUrl)

// 2. Le path
const url = `${baseUrl}/api/users/${userId}`
console.log("Full URL:", url) // Le userId est-il correct ?

// 3. La methode HTTP
// POST au lieu de GET ? PUT au lieu de PATCH ?

// 4. Tester dans le navigateur
// Colle l'URL dans l'onglet Network ou directement dans la barre d'adresse

// Erreur la plus courante :
const url1 = "/api/users"    // Correct
const url2 = "api/users"     // Manque le / initial !
const url3 = "/api/users/"   // Le / final peut poser probleme

// MAUVAIS : pas de verification
const response = await fetch('/api/users')
const data = await response.json() // Peut echouer si response n'est pas JSON

// BON : toujours verifier response.ok
const response = await fetch('/api/users')
if (!response.ok) {
  console.error(`Erreur ${response.status}: ${response.statusText}`)
  throw new Error(`HTTP ${response.status}`)
}
const data = await response.json()

// ENCORE MIEUX : wrapper reutilisable
async function safeFetch<T>(url: string): Promise<T> {
  const response = await fetch(url)
  if (!response.ok) {
    throw new Error(`Fetch failed: ${response.status} ${response.statusText}`)
  }
  return response.json()
}

// fetch n'a pas de timeout par defaut !
// Si le serveur ne repond pas, ta requete attend... indefiniment.

// Solution : AbortController
const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), 5000) // 5s max

try {
  const response = await fetch('/api/data', {
    signal: controller.signal
  })
  clearTimeout(timeout)
  const data = await response.json()
} catch (error) {
  if (error instanceof Error && error.name === 'AbortError') {
    console.error("Requete annulee : timeout de 5 secondes depasse")
  }
}