Web Security: Understanding and Resolving CORS Errors Permanently across Environments

ওয়েব ডেভেলপমেন্ট লাইফে প্রতিটি ডেভলপার কখনো না কখনো এই লাল এরর মেসেজটির মুখোমুখি হয়েছেন: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource..."। এটিই মূলত **CORS (Cross-Origin Resource Sharing)** এরর। এটি কোনো বাগ বা ভুল নয়, বরং ব্রাউজারের একটি অত্যন্ত শক্তিশালী বিল্ট-ইন সিকিউরিটি আর্কিটেকচার যা এক ডোমেইন থেকে অন্য ডোমেইনের অননুমোদিত ডেটা রিড করা ব্লক করে দেয়।

তবে ডেভেলপমেন্টের সময় যখন আপনার ফ্রন্টএন্ড রান করে এক ডোমেইনে (ধরা যাক Vercel-এ) এবং এপিআই ব্যাকএন্ড থাকে অন্য ক্লাউডে, তখন সঠিক রেসপন্স হেডার কনফিগার না করলে ডেটা আদান-প্রদান আটকে যায়। এই গাইডে আমরা দেখবো কীভাবে এই সমস্যার স্থায়ী সমাধান করা যায়।

১. মেকানিজম বোঝা: প্রিপ্লাইট (Preflight) রিকোয়েস্ট কী?

যখন ক্লায়েন্ট কোনো জটিল HTTP রিকোয়েস্ট (যেমন- PUT/DELETE বা কাস্টম হেডার যুক্ত কন্টেন্ট) পাঠায়, ব্রাউজার মূল রিকোয়েস্ট পাঠানোর ঠিক আগের মুহূর্তে স্বয়ংক্রিয়ভাবে একটি OPTIONS মেথডের রিকোয়েস্ট ব্যাকএন্ডে পাঠায়। একে বলা হয় প্রিপ্লাইট রিকোয়েস্ট। ব্যাকএন্ড যদি গ্রিন সিগন্যাল দেয়, তবেই কেবল ব্রাউজার মূল ডেটা পাস করে।

ধাপ ২: Node.js / Express ব্যাকএন্ডে পার্মানেন্ট সলিউশন

রেসপন্স হেডারে ম্যানুয়ালি কোড লেখার চেয়ে অফিসিয়াল এক্সপ্রেস cors গেটওয়ে মিডলওয়্যার ডাইনামিক হোয়াইট-লিস্টিং এর মাধ্যমে ব্যবহার করা সবচেয়ে নিরাপদ প্র্যাকটিস:

# ডিরেক্টরিতে এক্সপ্রেস কোর্ড প্লাগইন ইনস্টলেশন
npm install cors express

এখন আপনার মেইন সার্ভার ফাইলে (server.js) নিচের কনফিগারেশনটি পুশ করুন:

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

// অনুমোদিত ফ্রন্টএন্ড ডোমেইন সমূহের হোয়াইটলিস্ট অ্যারে
const trustedOrigins = [
    'https://ahyancreations.top',
    'https://blog.ahyancreations.top',
    'http://localhost:3000' # লোকাল ডেভেলপমেন্ট টেস্টিং এর জন্য
];

const corsEngineOptions = {
    origin: function (origin, callback) {
        // মোবাইল অ্যাপ বা লোকাল সার্ভার টুলস (যেমন Postman) থেকে রিকোয়েস্ট আসলে origin নাল হতে পারে
        if (!origin || trustedOrigins.indexOf(origin) !== -1) {
            callback(null, true); // রিকোয়েস্ট এলাউড
        } else {
            callback(new Error('[!] Network Blocked by Ahyan Security Matrix: CORS Violation'));
        }
    },
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
    credentials: true, // কুকি বা সেশন টোকেন পাস করার অনুমতি দেওয়া
    optionsSuccessStatus: 200 // পুরানো ব্রাউজার সামঞ্জস্যের জন্য
};

// গ্লোবাল মিডলওয়্যার হিসেবে অ্যাক্টিভেট করা
app.use(cors(corsEngineOptions));

app.get('/api/v1/secure-payload', (req, res) => {
    res.json({ status: "verified", data: "Core synchronization complete." });
});

app.listen(5000, () => console.log('Secure Server engine running on port 5000'));