TuZaKK 1
TuZaKK
Mt2Hizmet 1
Mt2Hizmet
Agora Metin2 1
Agora Metin2
Bvural41 1
Bvural41
kaptanmikro1 1
kaptanmikro1
R 1
Roksam
[DEV]AB 1
[DEV]AB
Sevdamsın 1
Sevdamsın
farkmt2official 1
farkmt2official
emirhanHCL 1
emirhanHCL
Scarlet 1
Scarlet
Hikaye Ekle

[NODE JS] CORS Nedir ve Nasıl Ayarlanır?

  • Konuyu başlatan Konuyu başlatan Silverhand
  • Başlangıç tarihi Başlangıç tarihi
  • Cevaplar Cevaplar 1
  • Görüntüleme Görüntüleme 15

Türkiye'de ilk Mobil & PC Aynı Anda Metin2 Oyna. Triarchonline kalıcı ve uzun ömürlü yapısı ile 24 Temmuz'da açılıyor. | 1-99 Mobil Metin2 Triarch HEMEN TIKLA!

nodejs.png


[NODE JS] CORS Nedir ve Nasıl Ayarlanır?​


Frontend geliştirme yapan herkesin en az bir kere karşılaştığı hata: "Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy." Bu hata mesajını gördüğünüzde ilk tepkiniz sinirlenip tarayıcıyı suçlamak olabilir ama aslında CORS çok önemli bir güvenlik mekanizması ve onsuz web çok daha tehlikeli bir yer olurdu.

CORS, Cross-Origin Resource Sharing'in kısaltmasıdır. Türkçe'ye çapraz kaynak paylaşımı olarak çevirebiliriz. Tarayıcılar güvenlik nedeniyle bir domain'den yüklenen bir web sayfasının farklı bir domain'deki API'ye istek atmasını varsayılan olarak engeller. Buna Same-Origin Policy deniyor. CORS ise bu kısıtlamayı kontrollü bir şekilde gevşetmenin yolu.

Şunu iyi anlamak lazım: CORS bir tarayıcı mekanizmasıdır. Postman'den veya curl'den istek attığınızda CORS hatası almazsınız. Sadece tarayıcı bu kontrolü yapar. Yani backend'iniz doğru çalışıyor olabilir ama tarayıcı response'u JavaScript kodunuza iletmeyi reddedebilir.

CORS'un çalışma mantığı şöyle: Tarayıcı isteğe Origin header'ı ekler. Sunucu response'ta Access-Control-Allow-Origin header'ı ile hangi origin'lerin erişebileceğini belirtir. Tarayıcı bu iki değeri karşılaştırır ve eşleşmezse response'u bloklar.

Basit istekler (GET, HEAD, POST) doğrudan gönderilir ve response header'ları kontrol edilir. Ama karmaşık isteklerde (PUT, DELETE, özel header'lar, farklı content-type) tarayıcı önce bir preflight isteği gönderir. Bu OPTIONS metoduyla yapılan bir ön kontrol isteğidir. Sunucu preflight'a izin verirse asıl istek gönderilir.

Ben birçok projede CORS yapılandırmasıyla uğraştım. En sık yaptığım hata Access-Control-Allow-Origin'i wildcard (*) olarak bırakmaktı. Bu geliştirme ortamında işe yarıyor ama production'da güvenlik riski oluşturuyor. Ayrıca credentials (cookie, authorization header) kullanırken wildcard çalışmıyor, spesifik origin belirtmeniz gerekiyor.

Node.js'te CORS'u iki şekilde ayarlayabilirsiniz: Manuel olarak header'ları kendiniz set edebilirsiniz ya da Express kullanıyorsanız cors paketini kullanabilirsiniz. Manuel yöntem daha fazla kontrol verir ama daha fazla kod yazmak gerekir. cors paketi ise yaygın senaryoları tek satırla çözer.

Preflight request'leri cache'lemek performans açısından önemli. Her karmaşık istek öncesinde OPTIONS isteği gönderilmesi gereksiz ağ trafiği oluşturur. Access-Control-Max-Age header'ı ile preflight sonucunu cache'letebilirsiniz. Ben genellikle 86400 saniye yani 24 saat kullanıyorum.

Birden fazla origin'e izin vermek istediğinizde Access-Control-Allow-Origin header'ına virgülle ayrılmış liste veremezsiniz. Ya wildcard kullanırsınız ya da gelen Origin header'ını kontrol edip, izin verilen listedeyse o origin'i response'a yazarsınız. Bu dinamik kontrolü yapan bir middleware yazmak en doğru yaklaşım.

CORS ayarlarında dikkat etmeniz gereken bir diğer konu da exposed headers. Varsayılan olarak tarayıcı sadece birkaç standard header'ı JavaScript koduna açar. Özel header'larınızı okumak istiyorsanız Access-Control-Expose-Headers header'ı ile bunları belirtmeniz gerekir. Mesela X-Total-Count gibi pagination header'larını frontend'de okumak istiyorsanız bunu mutlaka expose etmelisiniz.

JavaScript:
const http = require('http');

// Izin verilen originler listesi
const allowedOrigins = [
  'http://localhost:3000',
  'http://localhost:5173',
  'https://myapp.com',
  'https://www.myapp.com',
];

// CORS header'larini ayarlayan yardimci fonksiyon
function setCorsHeaders(req, res) {{
  const origin = req.headers.origin;

  // Origin izin verilen listede mi kontrol et
  if (allowedOrigins.includes(origin)) {{
    res.setHeader('Access-Control-Allow-Origin', origin);
  }}

  // Izin verilen HTTP metodlari
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');

  // Izin verilen header'lar
  res.setHeader('Access-Control-Allow-Headers',
    'Content-Type, Authorization, X-Requested-With, Accept, Origin'
  );

  // Cookie ve Authorization header'i gonderebilmek icin
  res.setHeader('Access-Control-Allow-Credentials', 'true');

  // Preflight cache suresi (24 saat)
  res.setHeader('Access-Control-Max-Age', '86400');

  // Frontend'in okuyabilecegi ozel header'lar
  res.setHeader('Access-Control-Expose-Headers',
    'X-Total-Count, X-Page-Count, X-Request-Id'
  );
}}

const server = http.createServer((req, res) => {{
  // CORS header'larini her istekte ayarla
  setCorsHeaders(req, res);

  // Preflight (OPTIONS) isteklerini yanitla
  if (req.method === 'OPTIONS') {{
    res.writeHead(204); // No Content
    res.end();
    return;
  }}

  // API endpoint'leri
  if (req.url === '/api/users' && req.method === 'GET') {{
    const users = [
      {{ id: 1, name: 'Ahmet Yilmaz', email: 'ahmet@example.com' }},
      {{ id: 2, name: 'Mehmet Demir', email: 'mehmet@example.com' }},
      {{ id: 3, name: 'Ayse Kaya', email: 'ayse@example.com' }},
    ];

    res.writeHead(200, {{
      'Content-Type': 'application/json',
      'X-Total-Count': users.length.toString(),
    }});
    res.end(JSON.stringify(users));
    return;
  }}

  res.writeHead(404, {{ 'Content-Type': 'application/json' }});
  res.end(JSON.stringify({{ error: 'Endpoint bulunamadi' }}));
}});

server.listen(4000, () => {{
  console.log('CORS destekli API sunucusu port 4000\'de calisiyor');
}});

Express kullanıyorsanız cors paketi işinizi çok kolaylaştırır. Ama arkasındaki mantığı bilmek debug yaparken hayat kurtarıyor.

JavaScript:
const express = require('express');
const cors = require('cors');
const app = express();

// Basit kullanim - tum originlere izin ver (sadece gelistirme icin)
// app.use(cors());

// Production icin detayli yapilandirma
const corsOptions = {{
  origin: function (origin, callback) {{
    const whitelist = [
      'http://localhost:3000',
      'http://localhost:5173',
      'https://myapp.com',
    ];

    // origin undefined ise (Postman, curl gibi) izin ver
    if (!origin || whitelist.includes(origin)) {{
      callback(null, true);
    }} else {{
      callback(new Error(`CORS politikasi tarafindan engellendi: ${{origin}}`));
    }}
  }},
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
  exposedHeaders: ['X-Total-Count', 'X-Request-Id'],
  credentials: true,
  maxAge: 86400,
  preflightContinue: false,
  optionsSuccessStatus: 204,
}};

app.use(cors(corsOptions));
app.use(express.json());

// Belirli route'lara farkli CORS ayarlari
const publicCors = cors({{ origin: '*' }});

app.get('/api/public/status', publicCors, (req, res) => {{
  res.json({{ status: 'ok', uptime: process.uptime() }});
}});

app.get('/api/users', (req, res) => {{
  res.set('X-Total-Count', '3');
  res.json([
    {{ id: 1, name: 'Ahmet' }},
    {{ id: 2, name: 'Mehmet' }},
    {{ id: 3, name: 'Ayse' }},
  ]);
}});

app.post('/api/users', (req, res) => {{
  console.log('Yeni kullanici:', req.body);
  res.status(201).json({{ id: 4, ...req.body }});
}});

// CORS hata yakalama
app.use((err, req, res, next) => {{
  if (err.message.includes('CORS')) {{
    res.status(403).json({{ error: err.message }});
  }} else {{
    next(err);
  }}
}});

app.listen(4000, () => {{
  console.log('Express CORS sunucusu port 4000\'de');
}});

CORS sorunlarını debug ederken tarayıcının Network sekmesini kullanın. Preflight isteğini ve response header'larını incelemek sorunun kaynağını hızlıca bulmanızı sağlar. Response'ta Access-Control-Allow-Origin header'ı yoksa sunucu tarafında CORS ayarlanmamış demektir.
 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Geri
Üst