Socket.IO CORS Configuration

Socket.IO v3 থেকে CORS ডিফল্টভাবে বন্ধ। client ও server আলাদা origin-এ থাকলে (যেমন frontend :5173, backend :3000) browser-এর handshake আটকে যায় — তাই server option-এ CORS অনুমোদন দিতে হয়।

শেখার লক্ষ্য

• CORS কেন Socket.IO-তে প্রযোজ্য
• server-এ cors option কনফিগার
• নির্দিষ্ট origin ও credentials ব্যবহার
• CORS error পড়া ও ঠিক করা

CORS কোথায় প্রযোজ্য?

• প্রথম HTTP handshake — long-polling বা WebSocket upgrade এখানেই হয়; এটাই CORS-এর আওতায়
• handshake-এর পর WebSocket connection থাকলে general-ভাবে cross-origin WebSocket-এ বাধা কম, তবে নিরাপত্তার জন্য origin যাচাই করা গুরুত্বপূর্ণ

বেসিক CORS Setup

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:5173", // frontend origin
    methods: ["GET", "POST"],
  },
});

Client সাধারণত নিজের কিছুই করতে হয় না — এ origin permitted হলে handshake সফল হয়।

একাধিক Origin

const io = new Server(httpServer, {
  cors: {
    origin: [
      "http://localhost:3000",
      "http://localhost:5173",
      "https://app.example.com",
    ],
    methods: ["GET", "POST"],
  },
});

Credentials (cookie/auth)

যদি request-এ cookie পাঠাতে হয়, client-এ withCredentials এবং server-এ credentials: true দিতে হবে। credentials থাকলে origin: \"*\" কাজ করবে না — নির্দিষ্ট origin দিতে হবে।

// client
const socket = io("http://localhost:3000", {
  withCredentials: true,
});

// server
const io = new Server(httpServer, {
  cors: {
    origin: "https://app.example.com", // নির্দিষ্ট origin, '*' নয়
    credentials: true,
  },
});

Dynamic Origin

const allowed = new Set([
  "http://localhost:5173",
  "https://app.example.com",
]);

const io = new Server(httpServer, {
  cors: {
    origin: (origin, callback) => {
      if (!origin || allowed.has(origin)) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
  },
});

Common CORS Errors

সাধারণ ভুল ও সমাধান

• দুই জায়গায় CORS — শুধু Socket.IO server option-এ দিন; Express-এর cors middleware আপনার socket handshake-এ সাধারণত প্রয়োজনে যোগ হয় না
• origin: \"*\" production-এ — নিরাপত্তা ঝুঁকি; allowed list দিন
• trailing slash — https://app.example.com/ আর https://app.example.com আলাদা ধরা হতে পারে; সমান রাখুন
• সব জায়গায় অনুমতি দিলে — CSRF-এর ঝুঁকি; auth cookie-সহ শুধু trusted origin অনুমোদন করুন

Practice Task

• frontend :5173 থেকে connect করে CORS error reproduce করুন, তারপর origin allow করে ঠিক করুন
• credentials-সহ cookie পাঠিয়ে origin: \"*\" দিয়ে error দেখুন
• একটি env-ভিত্তিক allowed origin list বানান

সম্পর্কিত অধ্যায়: Installation and Setup · Socket.IO with Express.js · Best Practices