ServBay’de Web Sitenizde CORS (Çapraz Kaynak Paylaşımı) Ayarları

Modern web geliştirmede, ön uç uygulamaları (genellikle bir alan adında çalışır) sık sık arka uç API’lerine veya diğer servislere (farklı bir alan adı ya da portta olabilir) erişmek ister. Tarayıcıların aynı kaynak politikası güvenlik nedeniyle bu tür çapraz alan isteklerini varsayılan olarak engeller. Çapraz Kaynak Paylaşımı (CORS), sunucunun hangi kaynakların erişime açık olduğunu belirtebildiği standart bir mekanizmadır ve bu şekilde güvenli çapraz kaynak etkileşimleri mümkün kılınır.

Bu yazıda, ServBay’in yerel Web geliştirme ortamında, web siteniz için ServBay kullanıcı arayüzü üzerinden CORS yapılandırmasını nasıl kolayca etkinleştireceğinizi öğreneceksiniz.

CORS Nedir?

Çapraz Kaynak Paylaşımı (CORS), hangi alanların/protokollerin/sunucu portlarının ek kaynaklar yükleyebileceğini sunucuya HTTP başlıkları aracılığıyla belirtebilmesini sağlayan bir mekanizmadır. Web siteniz kendi kaynağı dışındaki bir kaynaktan veri istediğinde tarayıcınız bunu “çapraz kaynak HTTP isteği” olarak değerlendirir ve aynı kaynak politikası gereği bu talebi engeller. CORS, tarayıcı ve sunucu arasında güvenliğin sağlanması için bu isteklere izin verilip verilmeyeceğini net olarak belirten bir iletişim yoludur.

Geliştiriciler neden CORS ayarı yapmalı?

Örneğin, ön yüzünüz app.servbay.demo’da, arka uç API’niz ise api.servbay.demo’da çalışıyor ya da ön yüzden üçüncü parti bir API’ye istek atıyorsunuz. Bu durumda, tarayıcılar istekleri CORS politikasına göre engeller. CORS ayarlarıyla, ön yüzünüzün alanından gelen isteklere sunucunuzun hangi kaynaklarını açacağınızı belirtir ve aynı kaynak politikası nedeniyle oluşan engelleri aşarsınız.

CORS’un Temel HTTP Yanıt Başlıklarını Anlamak

CORS yapılandırmasında esas olan, sunucunun çapraz kaynak erişimi için belirli Access-Control-* HTTP başlıklarını eklemesidir. Tarayıcı, gelen yanıttaki bu başlıkları kontrol ederek isteğin tamamlanıp tamamlanamayacağına karar verir. ServBay üzerinde yapılandırılabilen ana CORS parametreleri ve ilgili HTTP başlıkları şunlardır:

1. Access-Control-Allow-Origin

   • Amaç: En temel CORS başlığıdır; hangi alanların bu kaynağa erişebileceğini belirtir.
   • Değerler:
     • *: Tüm alanlardan gelecek isteklere izin verir. Dikkat: Çok pratik olsa da, üretim ortamında genellikle önerilmez; zira herhangi bir siteden kaynağınıza erişimi açar ve ciddi güvenlik riskleri oluşturur.
     • https://servbay.demo: Sadece bu adrese sahip kaynaktan gelen isteklere izin verir.
     • https://servbay.demo https://api.servbay.demo: Birden fazla alan adı belirtilebilir; aralarına boşluk bırakılır.
   • Not: Eğer çapraz kaynak talep sırasında Cookie veya HTTP kimlik doğrulama bilgisi gönderilecekse (Access-Control-Allow-Credentials: true ayarlıysa), Access-Control-Allow-Origin asla * olamaz. Mutlaka tekil kaynaklar açıkça belirtilmelidir.

2. Access-Control-Allow-Methods

   • Amaç: Hangi HTTP metodlarının çapraz kaynak isteklerinde kullanılabileceğini belirler (GET, POST, PUT, DELETE, OPTIONS vb.).
   • Değerler: Örneğin GET, POST, PUT, DELETE, OPTIONS. Birden fazla metodu virgül ile ayırın.
   • Not: Eğer istemci “basit” istek dışında bir yöntem (ör. PUT, DELETE ya da özel başlıklar) kullanıyorsa, tarayıcı öncelikle bir OPTIONS “preflight” isteği gönderir. Sunucu, bu isteğe doğru başlıklarla yanıt vermelidir. Genellikle OPTIONS metodunu da daima ekleyin.

3. Access-Control-Allow-Headers

   • Amaç: İstemcinin çapraz kaynak isterken gönderebileceği özel HTTP başlıklarını tanımlar.
   • Değerler: Örneğin Content-Type, Authorization, X-Requested-With. Birden fazla başlığı virgülle ayırın.
   • Not: Eğer ön yüzünüzde “basit başlıklar” dışında başlık (ör. Content-Type olup değeri application/x-www-form-urlencoded, multipart/form-data, ya da text/plain harici) kullanılıyorsa, preflight isteği otomatik yapılır ve izin verilen başlıkların burada açıkça belirtilmesi gerekir.

4. Access-Control-Allow-Credentials

   • Amaç: Çapraz kaynak isteklerinde kullanıcının kimlik verisi (örn. Cookie, istemci SSL sertifikası, HTTP kimlik doğrulaması) gönderilip gönderilemeyeceğini belirler.
   • Değerler: true ya da false.
   • Not: true olarak ayarlandığında, yukarıda belirtildiği gibi Access-Control-Allow-Origin kesinlikle * olmamalı. JavaScript tarafında da bu tür isteklerde uygun ayarın yapılması gerekir (örn. xhr.withCredentials = true veya fetch(url, { credentials: 'include' })).

ServBay’de CORS Nasıl Etkinleştirilir ve Yapılandırılır?

ServBay, her bir web sitesi için bağımsız CORS yapılandırması yapmanızı sağlayan görsel bir arayüz sunar. Detaylı adımlar aşağıda:

1. ServBay’i açıp site listesine gidin: ServBay uygulamasını başlatın. Ana ekranın sol menüsünden “Web siteleri” sekmesine tıklayın. Burada ServBay ortamına eklenen tüm web sitelerini görebilirsiniz.

2. CORS ayarı yapmak istediğiniz siteyi seçin: Listeden, CORS’u etkinleştirmek ve özelleştirmek istediğiniz siteyi bulun. Site adını tıklayarak detay ekranına geçin.

3. CORS ayarını bulun ve etkinleştirin: Site yapılandırma ekranında, orta bölümde “CORS” başlığını bulun. ServBay’de CORS varsayılan olarak kapalıdır. Yanındaki anahtarı sola kaydırarak “Açık” konuma getirin. Artık aşağıdaki ayarlar düzenlenebilir olacak.

4. Access-Control-Allow-Origin yapılandırması: “Access-Control-Allow-Origin” kutusuna, site kaynağınıza erişimine izin vermek istediğiniz bir ya da daha fazla alan adını yazın. Birden fazla alan adı için boşluk ile ayırın. Örnek: https://frontend.servbay.demo https://anotherapp.servbay.demo. Üretimde * kullanımından kaçının.

5. Access-Control-Allow-Methods yapılandırması: “Access-Control-Allow-Methods” kutusuna izin vermek istediğiniz HTTP metotlarını virgül ile ayırarak girin. Örnek: GET, POST, PUT, DELETE, OPTIONS. Gerekli tüm metotları eklediğinizden ve genellikle OPTIONS'ı da dahil ettiğinizden emin olun.

6. Access-Control-Allow-Headers yapılandırması: “Access-Control-Allow-Headers” kutusuna, istemcinin göndermesine izin verilen özel HTTP başlıklarını virgülle ayırarak girin. Örnek: Content-Type, Authorization, X-Custom-Header. Uygulamanızın gerçekten ihtiyaç duyduğu başlıkları belirtin.

7. Access-Control-Allow-Credentials yapılandırması (opsiyonel): Çapraz kaynak isteklerinde Cookie veya kimlik bilgisi göndermek için “Allow-Credentials” anahtarını açık konuma getirin. Tekrar vurgulamak gerekirse: Bu ayar etkinleştirildiğinde, 4. adımdaki Access-Control-Allow-Origin asla * olmamalı.

8. Ayarlarınızı Kaydedin: Tüm CORS ayarlarını yaptıktan sonra, sağ alt köşedeki “Kaydet” butonuna tıklamayı unutmayın. ServBay, gerekli Web sunucu yapılandırmasını (ör. Caddy veya Nginx) arka planda otomatik yapacak ve servisi yeniden başlatmanıza gerek kalmayacaktır.

Yapılandırma Örneği

Aşağıdaki görselde, “ServBay Demo Website” için ServBay’de CORS yapılandırma örneği görebilirsiniz:

Yukarıdaki örnek yapılandırmada:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: etkin (true)

Bu, yalnızca https://frontend.servbay.demo ve https://api.servbay.demo alanlarından gelen isteklerin “ServBay Demo Website” kaynağına erişebileceği anlamına gelir. Bu istekler; GET, POST, PUT, DELETE, OPTIONS HTTP metotlarını kullanabilir, Content-Type ve Authorization başlıklarını içerebilir ve Cookie gibi kimlik bilgileriyletebilir.

Dikkat Edilmesi Gerekenler ve En İyi Uygulamalar

• Güvenlik Öncelikli Olmalı: Geliştirme/test ortamında Access-Control-Allow-Origin: * pratik olabilir ama prodüksiyona geçerken, buna yalnızca gereken alan adlarını yazmanız kesinlikle güvenliği artıracaktır.
• Preflight İstekler: Preflight (ön kontrol) isteklerinin (OPTIONS) işleyişini anlamak, CORS sorunlarını ayıklamada çok önemlidir. Web sunucusundan (ServBay üzerinden ayarladığınız) gelen yanıtlarda başlıkların tam olduğundan emin olun.
• Tarayıcı Önbelleği: Tarayıcılar CORS politikalarını bazen önbelleğe alır. ServBay’de bir güncelleme sonrası sorun yaşamaya devam ediyorsanız, önbelleği temizleyin ya da gizli modda test edin.
• Uygulama Katmanı CORS: Bazı web framework’leri (Laravel, Express.js, Spring Boot vb.) uygulama düzeyinde de CORS desteği sunar. ServBay üzerinde yapılan CORS ayarı web sunucu düzeyinde geçerlidir ve çoğu zaman uygulama düzeyinden önce gelir. Karmaşık senaryolarda, her iki düzeydeki CORS ayarlarını gözden geçirin.
• Ayıklama Araçları: Geliştirici araçlarındaki “Ağ (Network)” sekmesi, yapılan talepleri ve ilgili tüm CORS başlıklarını görmenizi sağlar. Yanlış yapılandırmaları hızlıca tespit edebilirsiniz.

Sıkça Sorulan Sorular (SSS)

S: Tüm adımları yaptım, CORS hâlâ çalışmıyor; neden olabilir?

C: Şu adımları kontrol edin:

1. Tarayıcı konsolu ve ağ sekmesini inceleyin: Genellikle, hatayla ilgili bilgileri konsolda ve/veya istek yanıt başlıklarında bulursunuz. Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers başlıklarının olup olmadığına ve değerlerinin istemci isteğiyle eşleşip eşleşmediğine bakın.
2. Kaynak adresini doğrulayın: Access-Control-Allow-Origin başlığında adresin (protokol, domain, port) istemciyle aynı olduğundan emin olun.
3. Metotlar ve başlıklar: İstediğiniz HTTP metotları ve özel başlıkların yapılandırmada bulunduğuna emin olun.
4. Kimlik bilgisi (şifreleme) sorunları: Eğer Cookie veya başka kimlik bilgisi gereksiniminiz varsa, ServBay’de Allow-Credentials açık mı ve Access-Control-Allow-Origin olarak * değil özel bir adres yazılı mı bakın. İstemci kodunda da kimlik verisinin gönderileceğine dair ayar (withCredentials = true) yapılmış olmalı.
5. Preflight isteği: Basit olmayan istemci talepleri için, tarayıcınızın OPTIONS preflight isteği gönderip uygun CORS başlıklarını sunucudan alıp almadığını kontrol edin.
6. ServBay’de kaydedin: ServBay arayüzünden değişiklik yaptıktan sonra “Kaydet” butonuna basarak ayarların uygulandığından emin olun.

S: Tüm sitelerim için global CORS politikası belirleyebilir miyim?

C: ServBay’de CORS ayarı her bir web sitesi için ayrıca yapılır. Bu sayede daha esnek ve güvenli bir yöntem sunulur. Şu anda global CORS ayarı bulunmamaktadır. Benzer politikalara sahip birden fazla site için, her birinde ayrı ayrı yapılandırma yapmalısınız.

S: ServBay, CORS ayarlarını teknik olarak nasıl uygular?

C: ServBay arka planda Caddy veya Nginx web sunucularını kullanır. UI üzerinden yaptığınız CORS ayarları, otomatik ilgili Caddyfile veya Nginx konfigürasyonuna dönüştürülür. Bu dosyaların yönetimi ve sunucu servislerinin yeniden başlatılması ServBay tarafından otomatik yapılır; manuel düzenleme gerekmez.

Özet

ServBay’in kullanıcı dostu arayüzüyle, yerel geliştirme ortamınızda çalışan sitelerde sorunsuz CORS yapılandırması yapabilirsiniz. Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers ve Access-Control-Allow-Credentials gibi başlıkların anlamını iyi kavramak ve doğru yapılandırmak, güvenli ve akıcı çapraz kaynak istekleri için çok önemlidir. Bu rehberdeki öneri ve adımlar, yerel web geliştirme süreçlerinizde CORS’u hızlıca çözmenize destek olacaktır.