toolsmoah

Testeur CORS

Testez et déboguez les politiques de partage de ressources entre origines (CORS) et les requêtes API

Paramètres de Requête
Configurez votre requête API pour le test
Exemples de Requêtes
Essayez ces requêtes API prédéfinies
Informations CORS
Informations de base sur CORS

Qu'est-ce que CORS ? CORS (Cross-Origin Resource Sharing) est un mécanisme qui permet aux navigateurs web d'effectuer des requêtes cross-origin (domaine, protocole ou port différent) à partir de scripts exécutés dans le navigateur.

En-têtes CORS Clés

  • Access-Control-Allow-Origin: Spécifie les origines autorisées à accéder à la ressource
  • Access-Control-Allow-Methods: Spécifie les méthodes HTTP autorisées
  • Access-Control-Allow-Headers: Spécifie les en-têtes HTTP qui peuvent être utilisés
  • Access-Control-Allow-Credentials: Spécifie s'il faut inclure les identifiants (cookies, authentification HTTP)

💡 Solutions CORS

Solutions Côté Serveur

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

Solutions Côté Client

1. Utilisation d'un Serveur Proxy:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (GET uniquement):

// Solution limitée mais simple
          fetch('api?callback=handleResponse')

🔧 Configuration CORS par Environnement

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

Configuration CORS par Environnement

Scénarios de Test

  • • Requête Simple: Tester le comportement CORS de base avec des requêtes GET
  • • Requête Pré-vol: Tester les requêtes pré-vol avec les méthodes PUT/DELETE
  • • En-têtes Personnalisés: Tester les requêtes avec l'en-tête Authorization
  • • Identifiants: Tester les requêtes avec des cookies
  • • Gestion des Erreurs: Tester les scénarios d'échec

Considérations de Sécurité

  • • Soyez prudent avec l'utilisation de caractères génériques (*) en raison des risques de sécurité
  • • Principe du moindre privilège: N'autorisez que les origines et méthodes nécessaires
  • • Restrictions des identifiants: N'autorisez que des origines spécifiques lors de l'inclusion d'identifiants
  • • Examen régulier: Examinez et mettez à jour périodiquement les politiques CORS

Conseils de Débogage CORS

Outils de Développement du Navigateur

  • • Vérifier les requêtes OPTIONS dans l'onglet Réseau
  • • Rechercher les messages d'erreur CORS dans la Console
  • • Vérifier les en-têtes CORS dans les En-têtes de Réponse

Outils Utiles

  • • Testeur CORS (cet outil)
  • • Postman (pour les tests API)
  • • Commande curl (pour les tests directs du serveur)
    Testeur CORS