toolsmoah

Tester CORS

Testa e debugga le politiche CORS (Cross-Origin Resource Sharing) e le richieste API

Impostazioni richiesta
Configura la tua richiesta API per il test
Richieste di esempio
Prova queste richieste API predefinite
Informazioni CORS
Informazioni di base su CORS

Cos'è CORS? CORS (Cross-Origin Resource Sharing) è un meccanismo che consente ai browser web di effettuare richieste cross-origin (dominio, protocollo o porta diversi) da script in esecuzione nel browser.

Intestazioni CORS chiave

  • Access-Control-Allow-Origin: Specifica quali origini sono autorizzate ad accedere alla risorsa
  • Access-Control-Allow-Methods: Specifica quali metodi HTTP sono consentiti
  • Access-Control-Allow-Headers: Specifica quali intestazioni HTTP possono essere utilizzate
  • Access-Control-Allow-Credentials: Specifica se includere le credenziali (cookie, autenticazione HTTP)

💡 Soluzioni CORS

Soluzioni lato server

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 { ... }

Soluzioni lato client

1. Utilizzo di un server proxy:

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

2. JSONP (solo GET):

// Soluzione limitata ma semplice
          fetch('api?callback=handleResponse')

🔧 Configurazione CORS per ambiente

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"

Configurazione CORS per ambiente

Scenari di test

  • • Richiesta semplice: Testa il comportamento CORS di base con richieste GET
  • • Richiesta preflight: Testa le richieste preflight con i metodi PUT/DELETE
  • • Intestazioni personalizzate: Testa le richieste con l'intestazione Authorization
  • • Credenziali: Testa le richieste con i cookie
  • • Gestione degli errori: Testa gli scenari di errore

Considerazioni sulla sicurezza

  • • Fai attenzione all'uso del carattere jolly (*) a causa dei rischi per la sicurezza
  • • Principio del privilegio minimo: consenti solo le origini e i metodi necessari
  • • Restrizioni delle credenziali: consenti solo origini specifiche quando includi le credenziali
  • • Revisione regolare: rivedi e aggiorna periodicamente le politiche CORS

Suggerimenti per il debug CORS

Strumenti per sviluppatori del browser

  • • Controlla le richieste OPTIONS nella scheda Rete
  • • Cerca i messaggi di errore CORS nella Console
  • • Verifica le intestazioni CORS nelle intestazioni di risposta

Strumenti utili

  • • CORS Tester (questo strumento)
  • • Postman (per il test API)
  • • comando curl (per il test diretto del server)
    Tester CORS