Vercel’de Çalışan NestJS Uygulamanızda CORS Hatalarını Çözme
Merhaba! Fatih Soysal burada. Bu yazıda, NestJS uygulamalarınızı Vercel’de deploy ederken sık karşılaştığımız CORS (Cross-Origin Resource Sharing) hatalarını nasıl çözebileceğinizi adım adım açıklayacağım. Öncelikle, CORS hatasının ne olduğunu ve neden kaynaklandığını anlamak önemlidir. Kısaca, CORS, farklı bir domain’den gelen isteklere izin vermeyle ilgili bir güvenlik mekanizmasıdır. Örneğin, example.com adresindeki bir uygulama, api.example.com adresindeki API’ye istek gönderdiğinde, tarayıcı güvenlik nedeniyle bu isteği engeller. Bu durumda CORS hatası alırsınız.
Peki bu hatayı nasıl çözebiliriz? İşte size adım adım çözüm önerileri:
1. Sorunun Kaynağını Anlama
Öncelikle, karşılaştığınız hatanın tam metnini inceleyin. Hata mesajı, sorunun kaynağı hakkında önemli ipuçları içerecektir. Hata mesajında hangi origin’den istek geldiği ve hangi method’ların engellendiği belirtilecektir. Bu bilgi, doğru çözümü bulmanızda size yol gösterecektir.
2. Vercel’de CORS Ayarlarını Yapılandırma
Vercel, CORS ayarlarını yönetmenize olanak sağlayan bir arayüze sahiptir. Uygulamanızın deployment ayarlarına giderek, CORS veya benzeri bir başlık altında origin ve methods gibi özelliklerin tanımlanabileceği bir bölüm bulacaksınız. Burada, izin verilecek originleri (örneğin, https://www.fatihsoysal.com) ve HTTP methodlarını (GET, POST, PUT, DELETE vb.) belirleyebilirsiniz. Dikkat: Production ortamında, tüm originlere izin vermek güvenlik açığı yaratabilir, bu nedenle yalnızca güvenilir originleri belirlemeniz önemlidir.
3. NestJS Uygulamanızda CORS Ortamını Yapılandırma
Vercel’deki ayarlar yeterli olmayabilir. NestJS uygulamanızda da CORS’u açıkça yapılandırmanız gerekebilir. Bunun için @nestjs/platform-express paketini kullanabilirsiniz. Aşağıdaki kod örneği, CORS middleware’ini nasıl kullanabileceğinizi göstermektedir:
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: ['https://www.fatihsoysal.com', 'http://localhost:3000'], // İzin verilecek origin'leri buraya ekleyin
methods: ['GET', 'POST', 'PUT', 'DELETE'],
credentials: true // Eğer cookie kullanıyorsanız true yapın
});
await app.listen(3000);
}
bootstrap();
Bu kod, belirtilen originlerden gelen isteklere izin verir. credentials: true seçeneği, cookie’lerin iletilmesine izin verir. Bu seçeneği, oturum yönetimi gibi durumları gerektiren senaryolarda kullanmanız gerekebilir. Önemli Not: origin dizisine * eklemek tüm originlere izin vereceğinden güvenlik açısından risklidir. Mümkün olduğunca spesifik originler belirlemelisiniz.
4. Proxy Yapılandırması (Gelişmiş Çözüm)
Bazı durumlarda, Vercel’in proxy ayarlarını kullanarak CORS sorununu çözebilirsiniz. Vercel’in proxy özelliği, istekleri arka uç sunucunuzdan önce yakalayarak, gelen başlıkları ve yönlendirmeleri işleme olanağı sunar. Bu yöntem, özellikle karmaşık senaryolarda faydalı olabilir. Vercel’in dökümantasyonuna detaylı bilgi için bakabilirsiniz.
Sonuç
Umarım bu makale, Vercel’de çalışan NestJS uygulamalarınızdaki CORS hatalarını çözmenize yardımcı olmuştur. Hata ayıklama sürecinde sabırlı olun ve her adımı dikkatlice inceleyin. Unutmayın, güvenlik açısından tüm originlere izin vermekten kaçınmanız önemlidir. Daha fazla bilgi ve sorularınız için fatihsoysal.com adresini ziyaret edebilirsiniz. İyi kodlamalar!
Faydalı Kaynaklar:
#Etiketler: nestjs, vercel, cors, hata, çözüm, deployment, api, javascript, nodejs, güvenlik