Access-Control-Allow-Credentials: true ile cookie gönderirken karşılaştığım Access-Control-Allow-Origin kısıtı

devster · Dün 20:45 da

Merhaba arkadaşlar, bugün başımı çok ağrıtan ve CORS konusunda bildiğimi sandığım şeyleri tekrar gözden geçirmeme neden olan bir sorundan bahsedeceğim. Frontend'de (React kullanıyordum) bir istek yaparken, oturum bilgilerini taşıyan cookie'leri de göndermem gerekiyordu. `fetch` ile `credentials: 'include'` ayarını yaptım, backend'de de Laravel tarafında `Access-Control-Allow-Credentials: true` header'ını döndürdüm. Ama yine de tarayıcıdan o meşhur hatayı aldım: "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'." İlk gördüğümde "Ama ben zaten `` kullanmıyorum ki?" diye düşünmüştüm. Meğer iş öyle değilmiş.

Sorunun Tam Olarak Nerede Saklandığını Anlamak

Sorun şu: Eğer `Access-Control-Allow-Credentials: true` header'ını gönderiyorsanız, `Access-Control-Allow-Origin` header'ı asla ve asla joker karakter (``) olamaz. Bu, tarayıcıların katı güvenlik politikasının bir parçası. Benim hatam ise Laravel CORS paketimi veya middleware'im yanlış yapılandırdığım için, bazen preflight (OPTIONS) isteklerine `` döndürüyor olmasıydı. Ya da geliştirme ortamında backend URL'im farklıyken, izin verilen origin listesine frontend URL'imi tam olarak eklememiştim.

Backend (Laravel) Tarafında Yaptığım Temiz Çözüm

İşte benim kullandığım en temiz çözüm. Laravel'de özel bir middleware yazarak, gelen isteğin origin'ini kontrol edip, güvenli listemizde varsa onu `Access-Control-Allow-Origin` header'ı olarak dinamik bir şekilde ayarladım.

PHP:

<?php

namespace App\Http\Middleware;

use Closure;

class SecureCors
{
    /
      Handle an incoming request.
     
      @param  \Illuminate\Http\Request  $request
      @param  \Closure  $next
      @return mixed
     /
    public function handle($request, Closure $next)
    {
        // İzin verilen origin'lerin listesi
        $allowedOrigins = [
            'https://benimguvenlifrontend.com',
            'http://localhost:3000',
            'http://127.0.0.1:3000'
        ];

        // Gelen isteğin origin header'ını al
        $origin = $request->headers->get('Origin');

        // Eğer gelen origin, izin verilenler listesindeyse, onu ACAO header'ı olarak ayarla
        if (in_array($origin, $allowedOrigins)) {
            return $next($request)
                ->header('Access-Control-Allow-Origin', $origin)
                ->header('Access-Control-Allow-Credentials', 'true')
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
                ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
        }

        // Origin izin verilenlerde yoksa, credentials ile çalışamayacağımız için
        // basit CORS header'ları dönebilir veya 403 hatası verebilirsiniz.
        // Bu örnekte sadece devam ediyoruz ama ACAO header'ı göndermiyoruz.
        return $next($request);
    }
}

Bu middleware'i `Kernel.php` dosyasındaki `$middleware` gruplarına (genellikle `api` grubuna) eklemeyi unutmayın. Artık tarayıcı, isteğin origin'i `

Bu bağlantı ziyaretçiler için gizlenmiştir. Görmek için lütfen giriş yapın veya üye olun.

` ise, cevapta `Access-Control-Allow-Origin:

Bu bağlantı ziyaretçiler için gizlenmiştir. Görmek için lütfen giriş yapın veya üye olun.

` ve `Access-Control-Allow-Credentials: true` header'larını aynı anda görecek ve cookie'ler sorunsuz bir şekilde gidip gelecek.

Frontend (Fetch API) Tarafında Doğru Yapılandırma

Backend'i ayarladıktan sonra, frontend tarafında da isteği doğru şekilde göndermek çok önemli. İşte React/JavaScript tarafında kullandığım tipik `fetch` yapısı:

JavaScript:

async function fetchDataWithCredentials() {
  try {
    const response = await fetch('https://api.benimbackend.com/protected-route', {
      method: 'GET', // veya POST, PUT, vb.
      credentials: 'include', // 👈 Bu anahtar cookie'leri gönderir!
      headers: {
        'Content-Type': 'application/json',
        // Gerekirse Authorization header'ı da eklenebilir
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Başarılı:', data);
    return data;
  } catch (error) {
    console.error('Cookie ile istek sırasında hata:', error);
  }
}

`credentials: 'include'` ayarını yapmayı unutursanız, backend ne kadar doğru yapılandırılmış olursa olsun cookie'ler otomatik olarak gönderilmez. Bu küçük ama kritik detayı atlamamaya dikkat edin.

Sonuç olarak, `Access-Control-Allow-Credentials: true` ve `Access-Control-Allow-Origin` ikilisinin birlikte çalışması için, origin'in kesin ve belirli olarak belirtilmesi şart. Joker karakter (``) kullanma lüksümüz yok. Siz Laravel, Node.js (Express) veya başka bir backend framework'ü kullanırken aynı hatayı yaşadınız mı? Ya da farklı bir CORS yönetim yaklaşımınız var mı? Yorumlarda paylaşırsanız çok sevinirim, hep birlikte öğrenelim!

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Access-Control-Allow-Credentials: true ile cookie gönderirken karşılaştığım Access-Control-Allow-Origin kısıtı

devster

Tema özelleştirme sistemi

Tam ekran yada dar ekran