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

URL

Méthode HTTP

En-têtes

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