Merhaba arkadaşlar, bugün başımı çok ağrıtan bir CORS hatasını debug ederken, browser'ın DevTools Network panelinin aslında ne kadar detaylı ve hayat kurtarıcı bilgiler sunduğunu fark ettim. İlk gördüğümde "Access to fetch at '...' from origin '...' has been blocked by CORS policy" hatası karşısında biraz kafayı yemiştim doğrusu. Her şey doğru gibi görünüyordu ama işe yaramıyordu. İşte bu noktada sadece konsola bakmak yerine, Network panelini derinlemesine incelemek bana gerçek sorunu gösterdi.
Network Panelini Doğru Okumak
Sorun yaşadığınız isteğe (genellikle OPTIONS veya GET/POST) tıklayın. Sağ tarafta açılan sekmede Headers kısmına gidin. Burası altın değerinde. İki kritik bölüm var: "Request Headers" ve "Response Headers".
Özellikle Response Headers'da Access-Control-Allow-Origin başlığını arayın. Eğer yoksa veya değeri sizin frontend origin'inizle (
gibi) uyuşmuyorsa, sorun kaynağı orası. Ama daha sinsi bir sorun da şu: Bazen bu başlık var gibi görünür, ancak isteğinizde gönderdiğiniz özel bir header (örneğin Authorization) için sunucu tarafında izin verilmemiştir.
Preflight (OPTIONS) İsteğini Anlamak
Eğer POST isteğiniz gidiyor ama body'si ulaşmıyorsa, hemen Network panelinde OPTIONS türünde bir istek arayın. Tarayıcı, "complex" saydığı isteklerden önce bir ön sorgu (preflight) atar. Bu OPTIONS isteğinin yanıtı, asıl isteğinizin yapılıp yapılamayacağını belirler.
Bu OPTIONS isteğinin yanıtında şu header'ların doğru geldiğinden emin olun:
Eğer Authorization header'ını gönderiyorsanız, Access-Control-Allow-Headers listesinde mutlaka olmalı. Yoksa preflight başarısız olur ve asıl POST isteğiniz hiç gitmez!
DevTools'ta Pratik Debug İpuçları
1. İsteği Kopyala cURL olarak: Sağ tık -> Copy -> Copy as cURL. Bu komutu terminalde çalıştırarak, sorunun tarayıcıdan mı yoksa sunucudan mı kaynaklandığını anlayabilirsiniz.
2. Disable cache'i açın: Panelin üstündeki "Disable cache" kutusunu işaretleyin. Yanlış bir CORS yanıtı cache'lenmiş olabilir.
3. Response'u inceleyin: Bazen sunucu CORS hatasını 200 OK ile bile dönebilir. "Preview" veya "Response" sekmesine bakarak, sunucunun aslında bir hata mesajı dönüp dönmediğini kontrol edin.
Sonuç olarak, bir sonraki CORS kabusunuzda sadece kırmızı konsol yazısına odaklanmayın. Network panelini açın, isteğin tüm detaylarını inceleyin. Request ve Response header'ları karşılaştırmak, sorunu %90 hızlıca çözecektir.
Siz backend tarafında (Laravel, Node.js, vs.) CORS konfigürasyonu yaparken en çok hangi detayı atladınız? Ya da frontend'ten istek atarken başka hangi debug yöntemlerini kullanıyorsunuz?
Network Panelini Doğru OkumakSorun yaşadığınız isteğe (genellikle OPTIONS veya GET/POST) tıklayın. Sağ tarafta açılan sekmede Headers kısmına gidin. Burası altın değerinde. İki kritik bölüm var: "Request Headers" ve "Response Headers".
Özellikle Response Headers'da Access-Control-Allow-Origin başlığını arayın. Eğer yoksa veya değeri sizin frontend origin'inizle (
Bu bağlantı ziyaretçiler için gizlenmiştir. Görmek için lütfen giriş yapın veya üye olun.
Preflight (OPTIONS) İsteğini AnlamakEğer POST isteğiniz gidiyor ama body'si ulaşmıyorsa, hemen Network panelinde OPTIONS türünde bir istek arayın. Tarayıcı, "complex" saydığı isteklerden önce bir ön sorgu (preflight) atar. Bu OPTIONS isteğinin yanıtı, asıl isteğinizin yapılıp yapılamayacağını belirler.
Bu OPTIONS isteğinin yanıtında şu header'ların doğru geldiğinden emin olun:
HTTP:
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-WithEğer Authorization header'ını gönderiyorsanız, Access-Control-Allow-Headers listesinde mutlaka olmalı. Yoksa preflight başarısız olur ve asıl POST isteğiniz hiç gitmez!
DevTools'ta Pratik Debug İpuçları1. İsteği Kopyala cURL olarak: Sağ tık -> Copy -> Copy as cURL. Bu komutu terminalde çalıştırarak, sorunun tarayıcıdan mı yoksa sunucudan mı kaynaklandığını anlayabilirsiniz.
2. Disable cache'i açın: Panelin üstündeki "Disable cache" kutusunu işaretleyin. Yanlış bir CORS yanıtı cache'lenmiş olabilir.
3. Response'u inceleyin: Bazen sunucu CORS hatasını 200 OK ile bile dönebilir. "Preview" veya "Response" sekmesine bakarak, sunucunun aslında bir hata mesajı dönüp dönmediğini kontrol edin.
Sonuç olarak, bir sonraki CORS kabusunuzda sadece kırmızı konsol yazısına odaklanmayın. Network panelini açın, isteğin tüm detaylarını inceleyin. Request ve Response header'ları karşılaştırmak, sorunu %90 hızlıca çözecektir.
Siz backend tarafında (Laravel, Node.js, vs.) CORS konfigürasyonu yaparken en çok hangi detayı atladınız? Ya da frontend'ten istek atarken başka hangi debug yöntemlerini kullanıyorsunuz?