Third-party Middleware — morgan, compression, cors

~15 daq · Express · Middleware

Third-party middleware nima?

Express o'zi minimal — hamma narsani bermaydi. Lekin npm da minglab tayyor middleware lar bor. Ularni o'rnatib, app.use() bilan qo'shiladi.

Eng ko'p ishlatiladigan uchtasini ko'ramiz: morgan (logging), compression (siqish), cors (cross-origin).

morgan — HTTP request logging

morgan — har kelgan so'rovni avtomatik log qiladi. Kim qachon qaysi URL ga so'rov yubordi — hammasi ko'rinadi.

npm install morgan

const express = require('express');
const morgan  = require('morgan');
const app     = express();

app.use(morgan('dev'));

app.get('/users', (req, res) => {
  res.json([{ id: 1 }]);
});

app.listen(3000);

/users ga so'rov yuborganda terminal da:

GET /users 200 3.456 ms - 12

Format: metod url status vaqt - hajm

Formatlar:

app.use(morgan('dev'));     // rangli, development uchun
app.use(morgan('tiny'));    // minimal
app.use(morgan('combined')); // to'liq, production uchun (IP, user-agent ham)

combined production da ishlatiladi — barcha ma'lumotlar log fayliga yoziladi.

Faylga yozish:

const fs   = require('fs');
const path = require('path');

const logStream = fs.createWriteStream(
  path.join(__dirname, 'logs', 'access.log'),
  { flags: 'a' } // qo'shib yozish
);

app.use(morgan('combined', { stream: logStream }));

compression — javobni siqish

compression — server javobini gzip yoki brotli bilan siqadi. Hajm kamayadi, mijozga tezroq yetadi.

npm install compression

const compression = require('compression');

app.use(compression());

Shu bir qator — barcha javoblar avtomatik siqiladi. Brauzer Accept-Encoding: gzip header yuborsa — server siqib yuboradi.

Qancha tejaydi? Matn (JSON, HTML) uchun 60-80% hajm kamayadi. Rasm va video uchun — deyarli foyda yo'q (ular allaqachon siqilgan).

Faqat katta javoblarni siqish:

app.use(compression({
  threshold: 1024, // 1 KB dan kichik javoblarni siqma
}));

cors — Cross-Origin Resource Sharing

Bu middleware ni tushunish uchun avval muammoni tushunish kerak.

CORS muammosi nima?

Siz http://localhost:3000 da React ilovasi ishlatyapsiz. U http://localhost:5000 da Express API ga so'rov yubormoqchi. Brauzer bu so'rovni bloklaydi — chunki ikki xil origin (manba).

Bu — brauzerning xavfsizlik mexanizmi. Har qanday sayt sizning bankingizga so'rov yubora olmasligi uchun.

React (localhost:3000) → Express (localhost:5000)
Brauzer: "Boshqa origin! Ruxsat bormi?"
Express: "..."  ← javob bermasa → brauzer bloklaydi

cors middleware Express ga "qaysi originlarga ruxsat" deb aytadi.

npm install cors

Barcha originlarga ruxsat (development uchun):

const cors = require('cors');

app.use(cors());
// Endi har qanday origin so'rov yubora oladi

Faqat ma'lum originlarga ruxsat (production uchun):

app.use(cors({
  origin: ['https://myapp.com', 'https://www.myapp.com'],
}));

Credentials bilan (cookie, authorization header):

app.use(cors({
  origin: 'https://myapp.com',
  credentials: true, // cookie va auth header uchun
}));

⚠️ credentials: true bilan origin: '*' ishlamaydi — aniq origin ko'rsatilishi kerak.

Faqat ma'lum route uchun:

app.get('/public', cors(), (req, res) => {
  res.json({ data: 'Hamma ko\'ra oladi' });
});

app.get('/private', (req, res) => {
  res.json({ data: 'CORS yo\'q' });
});

Hammasi birgalikda

const express     = require('express');
const morgan      = require('morgan');
const compression = require('compression');
const cors        = require('cors');
const path        = require('path');

const app = express();

// Middleware lar — tartib muhim
app.use(morgan('dev'));                          // logging
app.use(compression());                          // siqish
app.use(cors({ origin: 'http://localhost:3000' })); // CORS
app.use(express.json());                         // body parse
app.use(express.static(path.join(__dirname, 'public'))); // static

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Ali' }]);
});

app.listen(5000);

Tez-tez uchraydigan xatolar

cors() ni route lardan keyin qo'yish:

app.get('/api/users', handler); // CORS headerlari yo'q!
app.use(cors());                 // kech

CORS middleware route lardan oldin bo'lishi kerak.

credentials: true bilan origin: '*':

// Xato:
app.use(cors({ origin: '*', credentials: true }));
// Brauzer: "credentials bilan wildcard origin ishlamaydi"

// To'g'ri:
app.use(cors({ origin: 'https://myapp.com', credentials: true }));

Xulosa

morgan — so'rovlarni log qiladi. Development da 'dev', production da 'combined'.

compression — javoblarni siqadi. Bir qator — 60-80% hajm tejash.

cors — boshqa originlardan so'rovlarga ruxsat beradi. Development da cors(), production da aniq origin ko'rsatiladi.

Keyingi dars

10-dars: Custom Middleware — yaratish, next(), xatolarni uzatish