Nginx Proxy İle CORS Hatası Çözümü: Detaylı Rehber

CORS hatası, Web geliştirme sürecinde karşılaşılan en can sıkıcı sorunlardan biri de CORS (Cross-Origin Resource Sharing) hatalarıdır. Özellikle Nginx proxy sunucusu kullanırken bu hatalarla karşılaşmak, geliştiricilerin kabusu haline gelebilir. Bu rehberde, Nginx proxy ile CORS hatalarını nasıl çözebileceğinizi adım adım ve pratik örneklerle açıklayacağız.

• CORS hatasının ne olduğunu anlayın.
• Nginx yapılandırma dosyasını doğru şekilde düzenleyin.
• Gerekli CORS başlıklarını ekleyin.
• Farklı senaryolar için çözümleri uygulayın.
• Yapılandırmayı test edin ve hataları giderin.

CORS Nedir ve Neden Önemlidir?

CORS (Cross-Origin Resource Sharing), bir web sayfasının farklı bir domainden (origin) kaynak talep etmesini kontrol eden bir güvenlik mekanizmasıdır. Tarayıcılar, güvenlik nedeniyle aynı domainden gelen isteklere izin verirken, farklı domainlerden gelen isteklere kısıtlamalar getirir. Bu kısıtlamalar, kötü niyetli web sitelerinin kullanıcıların verilerine erişmesini engellemeyi amaçlar. Ancak, bazen geliştiricilerin meşru istekleri de bu kısıtlamalara takılabilir. Örneğin, bir API sunucusundan veri çekmek istediğinizde CORS hatası alabilirsiniz.

CORS hataları, özellikle modern web uygulamalarında yaygın olarak görülür. Çünkü bu uygulamalar genellikle farklı domainlerdeki API’lerle iletişim kurar. Bu nedenle, CORS’u anlamak ve doğru şekilde yapılandırmak, başarılı bir web geliştirme süreci için kritik öneme sahiptir. CORS hatalarını çözmek için sunucu tarafında gerekli başlıkların eklenmesi gerekir.

CORS’un Temel İlkeleri

CORS, tarayıcıların gönderdiği HTTP isteklerine belirli başlıklar ekleyerek çalışır. Sunucu, bu başlıklara göre isteğin kaynağına izin verip vermeyeceğine karar verir. En önemli CORS başlıkları şunlardır:

• Access-Control-Allow-Origin: İsteğe izin verilen domainleri belirtir. ‘*’ değeri, tüm domainlere izin verildiği anlamına gelir (ancak güvenlik açısından tavsiye edilmez).
• Access-Control-Allow-Methods: İzin verilen HTTP metotlarını (GET, POST, PUT, DELETE vb.) belirtir.
• Access-Control-Allow-Headers: İzin verilen özel başlıkları belirtir.
• Access-Control-Allow-Credentials: Çerezlerin ve kimlik bilgilerinin gönderilmesine izin verilip verilmediğini belirtir.

Nginx Proxy’de CORS Ayarları Nasıl Yapılır?

Nginx proxy sunucusu kullanırken CORS hatalarını çözmek için Nginx yapılandırma dosyasını düzenlemeniz gerekir. Bu dosya genellikle /etc/nginx/nginx.conf veya /etc/nginx/sites-available/default gibi bir konumda bulunur. Yapılandırma dosyasını düzenlerken dikkatli olmalı ve değişiklikleri uygulamadan önce test etmelisiniz.

Aşağıdaki adımları izleyerek Nginx proxy’de CORS ayarlarını yapabilirsiniz:

1. Nginx yapılandırma dosyasını açın.
2. server bloğunu veya ilgili location bloğunu bulun.
3. Gerekli CORS başlıklarını ekleyin.
4. Nginx’i yeniden başlatın.

Örnek Nginx Yapılandırması

Aşağıdaki örnek, temel bir Nginx yapılandırmasıdır ve CORS başlıklarının nasıl ekleneceğini gösterir:

server {
 listen 80;
 server_name example.com;

 location /api/ {
 proxy_pass http://backend-server;

 add_header 'Access-Control-Allow-Origin' "*";
 add_header 'Access-Control-Allow-Methods' "GET, POST, PUT, DELETE, OPTIONS";
 add_header 'Access-Control-Allow-Headers' "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
 add_header 'Access-Control-Expose-Headers' "Content-Length,Content-Range";

 if ($request_method = OPTIONS) {
 add_header 'Access-Control-Allow-Origin' "*";
 add_header 'Access-Control-Allow-Methods' "GET, POST, PUT, DELETE, OPTIONS";
 add_header 'Access-Control-Allow-Headers' "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
 add_header 'Access-Control-Max-Age' 1728000;
 add_header 'Content-Type' "text/plain; charset=utf-8";
 return 204;
 }
 }
}

Bu yapılandırmada, /api/ yolu üzerinden gelen isteklere CORS başlıkları eklenir. Access-Control-Allow-Origin başlığına * değeri atanarak tüm domainlere izin verilir. Ancak, güvenlik nedeniyle bu değerin yerine belirli domainleri belirtmeniz daha doğru olacaktır. Örneğin, add_header 'Access-Control-Allow-Origin' "https://example.com"; şeklinde bir yapılandırma kullanabilirsiniz.

Farklı Senaryolar İçin CORS Çözümleri

CORS hataları, farklı senaryolarda farklı çözümler gerektirebilir. İşte bazı yaygın senaryolar ve çözüm önerileri:

• Basit İstekler: GET, POST veya HEAD metotları kullanılarak yapılan ve Content-Type başlığı application/x-www-form-urlencoded, multipart/form-data veya text/plain olan isteklerdir. Bu tür istekler için yukarıdaki temel yapılandırma genellikle yeterlidir.
• Ön Kontrol İstekleri (Preflight Requests): PUT, DELETE gibi metotlar kullanılarak yapılan veya özel başlıklar içeren isteklerdir. Bu tür istekler için tarayıcı, sunucuya bir OPTIONS isteği göndererek CORS politikasını kontrol eder. Bu nedenle, Nginx yapılandırmasında OPTIONS isteği için de gerekli başlıkların eklenmesi gerekir.
• Kimlik Bilgileriyle Yapılan İstekler: Çerezlerin ve kimlik bilgilerinin gönderildiği isteklerdir. Bu tür istekler için Access-Control-Allow-Credentials başlığının true olarak ayarlanması ve Access-Control-Allow-Origin başlığında * yerine belirli bir domainin belirtilmesi gerekir.

Örnek: Kimlik Bilgileriyle Yapılan İstekler İçin Yapılandırma

server {
 listen 80;
 server_name example.com;

 location /api/ {
 proxy_pass http://backend-server;

 add_header 'Access-Control-Allow-Origin' "https://example.com";
 add_header 'Access-Control-Allow-Methods' "GET, POST, PUT, DELETE, OPTIONS";
 add_header 'Access-Control-Allow-Headers' "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
 add_header 'Access-Control-Allow-Credentials' "true";

 if ($request_method = OPTIONS) {
 add_header 'Access-Control-Allow-Origin' "https://example.com";
 add_header 'Access-Control-Allow-Methods' "GET, POST, PUT, DELETE, OPTIONS";
 add_header 'Access-Control-Allow-Headers' "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
 add_header 'Access-Control-Allow-Credentials' "true";
 add_header 'Access-Control-Max-Age' 1728000;
 add_header 'Content-Type' "text/plain; charset=utf-8";
 return 204;
 }
 }
}

CORS Ayarlarını Test Etme ve Hataları Giderme

CORS ayarlarını yaptıktan sonra, yapılandırmayı test etmek ve hataları gidermek önemlidir. Tarayıcı geliştirici araçlarını (Developer Tools) kullanarak ağ isteklerini inceleyebilir ve CORS hatalarını tespit edebilirsiniz. Ayrıca, çevrimiçi CORS test araçlarını da kullanabilirsiniz.

CORS hatalarını gidermek için aşağıdaki adımları izleyebilirsiniz:

1. Tarayıcı geliştirici araçlarını açın ve ağ sekmesini (Network tab) inceleyin.
2. CORS hatası veren isteği bulun ve hata mesajını inceleyin.
3. Hata mesajına göre Nginx yapılandırmasını düzenleyin.
4. Nginx’i yeniden başlatın ve isteği tekrar test edin.

Yaygın CORS Hataları ve Çözümleri

• “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”: Bu hata, sunucunun Access-Control-Allow-Origin başlığını göndermediği anlamına gelir. Nginx yapılandırmasına bu başlığı ekleyerek çözebilirsiniz.
• “The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include'”: Bu hata, kimlik bilgileriyle yapılan isteklerde Access-Control-Allow-Origin başlığında * değerinin kullanılamayacağını belirtir. Bu başlığa belirli bir domaini belirterek çözebilirsiniz.
• “Request header field X-Custom-Header is not allowed by Access-Control-Allow-Headers in preflight response”: Bu hata, özel bir başlığın (örneğin, X-Custom-Header) Access-Control-Allow-Headers başlığında belirtilmediği anlamına gelir. Nginx yapılandırmasına bu başlığı ekleyerek çözebilirsiniz.

Nginx Proxy ile CORS: Bilinmesi Gerekenler

Nginx proxy ile CORS ayarlarını yaparken dikkat edilmesi gereken bazı önemli noktalar vardır. Güvenlik, performans ve uyumluluk gibi faktörleri göz önünde bulundurarak doğru yapılandırmayı yapmanız önemlidir.

Özetle:

• Güvenlik için Access-Control-Allow-Origin başlığında * yerine belirli domainleri belirtin.
• Performansı artırmak için Access-Control-Max-Age başlığını kullanarak tarayıcının CORS politikasını ne kadar süreyle önbelleğe alacağını belirleyin.
• Farklı tarayıcılar ve cihazlarla uyumluluğu sağlamak için CORS başlıklarını doğru şekilde yapılandırın.