Strona główna → Pomoc

Błąd CORS przy wywołaniu API AI z przeglądarki

Co widzisz

• 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

Dlaczego tak się dzieje

Kusi, żeby potraktować to jako problem konfiguracji – dodać origin i wypuścić funkcję. Ale zastanów się, co oznacza udane wywołanie z przeglądarki. Klucz podróżuje w nagłówku, który narzędzia deweloperskie użytkownika pokazują w całości. Jest w bundlu, jeśli go wkleiłeś, i w zakładce sieci, jeśli nie. Każdy, kto otworzy stronę, go ma.

Klucze wyciekające w ten sposób to nie teoretyczne ryzyko. Publiczne wyszukiwarki kodu wyciągają je bez przerwy, a skradziony klucz do API rozliczanego za tokeny zamienia się wprost w cudzy rachunek na twoim koncie. Dlatego większość dostawców ustawia restrykcyjny allow-origin zamiast * – to nie przeoczenie, tylko świadoma odmowa.

Wzorzec proxy to trzy, cztery linie kodu serwera: strona wywołuje twój backend, backend trzyma klucz i wywołuje dostawcę. Daje ci to też miejsce na limity zapytań i wydatków na użytkownika, które i tak chcesz mieć.

Sprawdź, czy to ta przyczyna

Zapytaj endpoint, jakie originy faktycznie dopuszcza:

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'

Jeśli Access-Control-Allow-Origin wraca z konkretną domeną zamiast *, wywołania z przeglądarki z twojego originu nie zadziałają i żadna zmiana po stronie klienta tego nie zmieni.

Jak to naprawić

1. Postaw jeden endpoint na własnym backendzieTwoja strona wysyła zapytanie do /api/chat we własnej domenie; ta obsługa dodaje nagłówek Authorization i przekazuje zapytanie dalej. Bez udziału CORS, bo przeglądarka rozmawia tylko z twoim originem.
2. Nigdy nie używaj publicznego prefiksu budowania dla kluczaZmienne NEXT_PUBLIC_, VITE_ i REACT_APP_ są wkompilowywane w wysyłany JavaScript. Klucz umieszczony tam jest opublikowany, a nie skonfigurowany.
3. Zrotuj wszystko, co już trafiło do wdrożeniaJeśli klucz był w opublikowanym bundlu, traktuj go jako publiczny i wymień. Rotacja jest tania; nieograniczony rachunek nie.
4. Dodaj limity na użytkownika w swoim proxyGdy ruch przechodzi przez twoją obsługę, możesz ograniczyć wydatki na sesję. Wywołując dostawcę bezpośrednio z przeglądarki, nie masz gdzie tego wymusić.

Powiązane

Ostatnio sprawdzono 2026-10-01. Napisane na podstawie problemów zdiagnozowanych na działającej bramce zgodnej z OpenAI, a nie zebrane z innych stron.