{"id":18964,"date":"2025-04-23T09:30:15","date_gmt":"2025-04-23T06:30:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vercelde-calisan-nestjs-uygulamanizda-cors-hatalarini-cozme\/"},"modified":"2025-04-23T09:30:15","modified_gmt":"2025-04-23T06:30:15","slug":"vercelde-calisan-nestjs-uygulamanizda-cors-hatalarini-cozme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vercelde-calisan-nestjs-uygulamanizda-cors-hatalarini-cozme\/","title":{"rendered":"Vercel’de \u00c7al\u0131\u015fan NestJS Uygulaman\u0131zda CORS Hatalar\u0131n\u0131 \u00c7\u00f6zme"},"content":{"rendered":"

<\/p>\n

Vercel’de \u00c7al\u0131\u015fan NestJS Uygulaman\u0131zda CORS Hatalar\u0131n\u0131 \u00c7\u00f6zme<\/p>\n

Merhaba! Fatih Soysal burada. Bu yaz\u0131da, NestJS uygulamalar\u0131n\u0131z\u0131 Vercel’de deploy ederken s\u0131k kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z CORS (Cross-Origin Resource Sharing) hatalar\u0131n\u0131 nas\u0131l \u00e7\u00f6zebilece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle, CORS hatas\u0131n\u0131n ne oldu\u011funu ve neden kaynakland\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir. K\u0131saca, CORS, farkl\u0131 bir domain’den gelen isteklere izin vermeyle ilgili bir g\u00fcvenlik mekanizmas\u0131d\u0131r. \u00d6rne\u011fin, example.com adresindeki bir uygulama, api.example.com adresindeki API’ye istek g\u00f6nderdi\u011finde, taray\u0131c\u0131 g\u00fcvenlik nedeniyle bu iste\u011fi engeller. Bu durumda CORS hatas\u0131 al\u0131rs\u0131n\u0131z.<\/p>\n

Peki bu hatay\u0131 nas\u0131l \u00e7\u00f6zebiliriz?<\/b> \u0130\u015fte size ad\u0131m ad\u0131m \u00e7\u00f6z\u00fcm \u00f6nerileri:<\/p>\n

1. Sorunun Kayna\u011f\u0131n\u0131 Anlama<\/h2>\n

\u00d6ncelikle, kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z hatan\u0131n tam metnini inceleyin. Hata mesaj\u0131, sorunun kayna\u011f\u0131 hakk\u0131nda \u00f6nemli ipu\u00e7lar\u0131 i\u00e7erecektir. Hata mesaj\u0131nda hangi origin’den istek geldi\u011fi ve hangi method’lar\u0131n engellendi\u011fi belirtilecektir. Bu bilgi, do\u011fru \u00e7\u00f6z\u00fcm\u00fc bulman\u0131zda size yol g\u00f6sterecektir.<\/p>\n

2. Vercel’de CORS Ayarlar\u0131n\u0131 Yap\u0131land\u0131rma<\/h2>\n

Vercel, CORS ayarlar\u0131n\u0131 y\u00f6netmenize olanak sa\u011flayan bir aray\u00fcze sahiptir. Uygulaman\u0131z\u0131n deployment ayarlar\u0131na giderek, CORS veya benzeri bir ba\u015fl\u0131k alt\u0131nda origin ve methods gibi \u00f6zelliklerin tan\u0131mlanabilece\u011fi bir b\u00f6l\u00fcm bulacaks\u0131n\u0131z. Burada, izin verilecek originleri (\u00f6rne\u011fin, https:\/\/www.fatihsoysal.com) ve HTTP methodlar\u0131n\u0131 (GET, POST, PUT, DELETE vb.) belirleyebilirsiniz. Dikkat:<\/b> Production ortam\u0131nda, t\u00fcm originlere izin vermek g\u00fcvenlik a\u00e7\u0131\u011f\u0131 yaratabilir, bu nedenle yaln\u0131zca g\u00fcvenilir originleri belirlemeniz \u00f6nemlidir. <\/p>\n

3. NestJS Uygulaman\u0131zda CORS Ortam\u0131n\u0131 Yap\u0131land\u0131rma<\/h2>\n

Vercel’deki ayarlar yeterli olmayabilir. NestJS uygulaman\u0131zda da CORS’u a\u00e7\u0131k\u00e7a yap\u0131land\u0131rman\u0131z gerekebilir. Bunun i\u00e7in @nestjs\/platform-express paketini kullanabilirsiniz. A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi, CORS middleware’ini nas\u0131l kullanabilece\u011finizi g\u00f6stermektedir:<\/p>\n

\nimport { NestFactory } from '@nestjs\/core';\nimport { AppModule } from '.\/app.module';\n\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule);\n  app.enableCors({\n    origin: ['https:\/\/www.fatihsoysal.com', 'http:\/\/localhost:3000'], \/\/ \u0130zin verilecek origin'leri buraya ekleyin\n    methods: ['GET', 'POST', 'PUT', 'DELETE'],\n    credentials: true \/\/ E\u011fer cookie kullan\u0131yorsan\u0131z true yap\u0131n\n  });\n  await app.listen(3000);\n}\nbootstrap();\n<\/code><\/pre>\n
Bu kod, belirtilen originlerden gelen isteklere izin verir.  credentials: true se\u00e7ene\u011fi,  cookie’lerin iletilmesine izin verir.  Bu se\u00e7ene\u011fi,  oturum y\u00f6netimi gibi durumlar\u0131 gerektiren senaryolarda kullanman\u0131z gerekebilir.  \u00d6nemli Not:<\/b>  origin dizisine * eklemek t\u00fcm originlere izin verece\u011finden g\u00fcvenlik a\u00e7\u0131s\u0131ndan risklidir.  M\u00fcmk\u00fcn oldu\u011funca spesifik originler belirlemelisiniz.<\/p>\n
4.  Proxy Yap\u0131land\u0131rmas\u0131 (Geli\u015fmi\u015f \u00c7\u00f6z\u00fcm)<\/h2>\n
Baz\u0131 durumlarda,  Vercel’in proxy ayarlar\u0131n\u0131 kullanarak CORS sorununu \u00e7\u00f6zebilirsiniz. Vercel’in proxy \u00f6zelli\u011fi, istekleri arka u\u00e7 sunucunuzdan \u00f6nce yakalayarak,  gelen ba\u015fl\u0131klar\u0131 ve y\u00f6nlendirmeleri i\u015fleme olana\u011f\u0131 sunar. Bu y\u00f6ntem, \u00f6zellikle karma\u015f\u0131k senaryolarda faydal\u0131 olabilir.  Vercel’in d\u00f6k\u00fcmantasyonuna detayl\u0131 bilgi i\u00e7in bakabilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Umar\u0131m bu makale, Vercel’de \u00e7al\u0131\u015fan NestJS uygulamalar\u0131n\u0131zdaki CORS hatalar\u0131n\u0131 \u00e7\u00f6zmenize yard\u0131mc\u0131 olmu\u015ftur.  Hata ay\u0131klama s\u00fcrecinde sab\u0131rl\u0131 olun ve her ad\u0131m\u0131 dikkatlice inceleyin.  Unutmay\u0131n, g\u00fcvenlik a\u00e7\u0131s\u0131ndan t\u00fcm originlere izin vermekten ka\u00e7\u0131nman\u0131z \u00f6nemlidir.  Daha fazla bilgi ve  sorular\u0131n\u0131z i\u00e7in  fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.   \u0130yi kodlamalar!<\/p>\n
Faydal\u0131 Kaynaklar:<\/b><\/p>\n