Home → Assistenza

Errore CORS chiamando un'API di IA dal browser

Cosa vedi

• Access to fetch at '...' from origin '...' has been blocked by CORS policy
• No 'Access-Control-Allow-Origin' header is present on the requested resource
• The request works in curl and Postman but not in the browser

Perché succede

Si è tentati di vederlo come un problema di configurazione: aggiungi un'origine e pubblichi la funzione. Ma pensa a cosa comporta una chiamata riuscita dal browser. La chiave viaggia in un header che gli strumenti per sviluppatori dell'utente mostrano per intero. È nel bundle se l'hai incorporata, e nella scheda di rete se non l'hai fatto. Chiunque apra la pagina la possiede.

Le chiavi trapelate così non sono un rischio teorico. I motori di ricerca di codice pubblico le fanno emergere di continuo, e una chiave rubata su un'API a pagamento per token si trasforma direttamente nella bolletta di qualcun altro addebitata sul tuo account. Ecco perché la maggior parte dei provider imposta un allow-origin restrittivo invece di *: non è una svista, è un rifiuto deliberato.

Lo schema proxy sono tre o quattro righe di codice lato server: la tua pagina chiama il tuo backend, il tuo backend custodisce la chiave e chiama il provider. Ti dà anche il punto in cui mettere limiti di frequenza e di spesa per utente, che comunque ti servono.

Verifica se la causa è questa

Chiedi all'endpoint quali origini consente davvero:

curl -s -I -X OPTIONS 'YOUR_BASE_URL/chat/completions' \
  -H 'Origin: https://example.com' \
  -H 'Access-Control-Request-Method: POST' \
  | grep -i 'access-control'

Se Access-Control-Allow-Origin restituisce un dominio specifico invece di *, le chiamate dal browser sulla tua origine non funzioneranno, e nessuna modifica lato client cambierà le cose.

Come risolvere

1. Metti un endpoint sul tuo backendLa tua pagina invia a /api/chat sul tuo dominio; quel gestore aggiunge l'header Authorization e inoltra la richiesta. Nessun CORS in gioco, perché il browser parla solo con la tua origine.
2. Non usare mai un prefisso pubblico di build per una chiaveLe variabili NEXT_PUBLIC_, VITE_ e REACT_APP_ vengono compilate nel JavaScript che distribuisci. Una chiave messa lì è pubblicata, non configurata.
3. Ruota tutto ciò che è già stato distribuitoSe una chiave è finita in un bundle pubblicato, considerala pubblica e sostituiscila. Ruotare costa poco; una bolletta senza limiti no.
4. Aggiungi limiti per utente nel tuo proxyQuando il traffico passa dal tuo gestore puoi limitare la spesa per sessione. Chiamare il provider direttamente dal browser non ti lascia alcun punto in cui imporlo.

Articoli correlati

Ultima verifica: 2026-10-01. Scritto a partire da problemi diagnosticati su un gateway compatibile con OpenAI in produzione, non raccolto da altri siti.