Ana sayfa → Yardım

Tarayıcıdan bir yapay zekâ API'sini çağırırken CORS hatası

Gördüğünüz hata

• 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

Neden oluyor

Bunu bir yapılandırma sorunu olarak görmek cazip gelir – bir origin ekle, özelliği yayınla. Ama başarılı bir tarayıcı çağrısının ne anlama geldiğini düşünün. Anahtar, kullanıcının kendi geliştirici araçlarının eksiksiz gösterdiği bir başlıkta taşınır. Gömdüyseniz paketin içindedir, gömmediyseniz ağ sekmesindedir. Sayfayı açan herkeste vardır.

Bu yolla sızan anahtarlar teorik bir risk değildir. Herkese açık kod aramaları onları sürekli ortaya çıkarır ve token başına ücretlendirilen bir API'nin çalınmış anahtarı, doğrudan sizin hesabınızda başkasının faturasına dönüşür. Çoğu sağlayıcının * yerine kısıtlayıcı bir allow-origin ayarlamasının sebebi budur – bir gözden kaçırma değil, bilinçli bir ret.

Proxy kalıbı üç dört satırlık sunucu kodudur: Sayfanız sizin backend'inizi çağırır, backend anahtarı tutar ve sağlayıcıyı çağırır. Ayrıca kullanıcı başına hız sınırları ve harcama tavanları koyacağınız yeri de verir; bunları zaten istersiniz.

Sebebin bu olduğunu doğrulayın

Uç noktaya gerçekte hangi origin'lere izin verdiğini sorun:

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'

Access-Control-Allow-Origin, * yerine belirli bir alan adıyla dönüyorsa, kendi origin'inizden tarayıcı çağrıları çalışmayacaktır ve istemci tarafındaki hiçbir değişiklik bunu değiştirmez.

Nasıl düzeltilir

1. Kendi backend'inize bir uç nokta koyunSayfanız kendi alan adınızdaki /api/chat adresine istek gönderir; o işleyici Authorization başlığını ekler ve isteği iletir. CORS devreye girmez, çünkü tarayıcı yalnızca sizin origin'inizle konuşur.
2. Bir anahtar için asla derleme zamanı herkese açık ön ek kullanmayınNEXT_PUBLIC_, VITE_ ve REACT_APP_ değişkenleri yayınladığınız JavaScript'e derlenir. Oraya konan bir anahtar yapılandırılmış değil, yayınlanmıştır.
3. Zaten yayınlanmış her şeyi yenileyinBir anahtar yayınlanmış bir pakette yer aldıysa onu herkese açık sayın ve değiştirin. Yenilemek ucuzdur; sınırsız bir fatura değil.
4. Proxy'nizde kullanıcı başına sınır koyunTrafik kendi işleyicinizden geçtiği anda oturum başına harcamayı sınırlayabilirsiniz. Sağlayıcıyı doğrudan tarayıcıdan çağırırsanız bunu uygulayacak bir yeriniz olmaz.

İlgili konular

Son kontrol: 2026-10-01. Canlı bir OpenAI uyumlu ağ geçidinde teşhis edilen sorunlardan yazılmıştır, başka sitelerden derlenmemiştir.