🅰️ Angular

Bloqué par la politique CORS (No 'Access-Control-Allow-Origin')

Le navigateur bloque la requête car le serveur (l'API) n'autorise pas explicitement votre origine. C'est une protection navigateur, pas un bug de votre code Angular.

Message d'erreur
Access to XMLHttpRequest at 'http://api...' from origin 'http://localhost:4200' has been blocked by CORS policy

🔍 Cause la plus probable

L'API ne renvoie pas l'en-tête `Access-Control-Allow-Origin` couvrant l'origine de votre front. La correction se fait côté serveur (backend), pas côté Angular.

✅ Solution étape par étape

  1. Côté backend, autorisez votre origine. En Spring Boot : `@CrossOrigin` ou une configuration CORS globale.
  2. En développement, utilisez un proxy Angular (`proxy.conf.json`) pour servir l'API sous la même origine.
  3. Vérifiez que les requêtes preflight `OPTIONS` reçoivent bien un `200` avec les bons en-têtes.
// Spring Boot — config globale
@Bean
WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurer() {
    @Override public void addCorsMappings(CorsRegistry r) {
      r.addMapping("/api/**").allowedOrigins("https://dakar.dev");
    }
  };
}

🧩 Autres causes possibles

Credentials + wildcard

Avec `withCredentials`, vous ne pouvez pas utiliser `*` : indiquez l'origine exacte côté serveur.

Proxy/Nginx qui retire les en-têtes

Assurez-vous que le reverse proxy ne supprime pas les en-têtes CORS de l'API.

🛡️ Comment l'éviter à l'avenir

Centralisez la config CORS côté backend par environnement, et utilisez un proxy en local pour éviter les surprises.

🔒 Votre erreur est différente ?

Collez votre message d'erreur dans notre analyseur IA. Traitement anonymisé, rien n'est stocké.

Analyser mon erreur avec l'IA

Bloqué sur un bug plus complexe ?

Nos développeurs Java, Spring & Angular débuggent, optimisent et livrent votre projet.

Parler à un développeur