কিভাবে CORS প্রিফ্লাইট বিকল্পগুলি উৎপাদনে ব্যর্থতার অনুরোধ ঠিক করবেন

আপনার API বিকাশে কাজ করে কিন্তুএর সাথে উত্পাদনে ব্যর্থ হয়৷ CORS প্রিফ্লাইট অনুরোধ অ্যাক্সেস কন্ট্রোল চেক পাস করে না অথবা OPTIONS অনুরোধ 404/405 রিটার্ন করে। প্রিফ্লাইট ব্যর্থতা একটি সাধারণ উৎপাদন-শুধু CORS সমস্যা। তাদের নির্ণয় এবং ঠিক করার উপায় এখানে।

একটি Preflight অনুরোধ কি?

“অ-সরল” অনুরোধের জন্য (পুট, মুছে ফেলুন, কাস্টম হেডার, বা JSON সামগ্রী-টাইপ), ব্রাউজার একটিবিকল্পগুলি প্রথমে অনুরোধ করুন – “প্রিফ্লাইট” – সার্ভারকে জিজ্ঞাসা করুন যে প্রকৃত অনুরোধ অনুমোদিত কিনা। প্রিফ্লাইট ব্যর্থ হলে, প্রকৃত অনুরোধ কখনই চলে না। বিভিন্ন সার্ভার কনফিগারেশনের কারণে প্রিফ্লাইট ব্যর্থতা প্রায়শই শুধুমাত্র উৎপাদনে দেখা যায়।

# Browser automatically sends this before your POST:
OPTIONS /api/users HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

# Server MUST respond with matching CORS headers and 2xx status

কারণ 1: সার্ভার বিকল্পগুলি পরিচালনা করে না

// 🐛 Express route only handles POST, not OPTIONS preflight
app.post('/api/users', createUser);
// The OPTIONS preflight hits no handler → 404/405 → preflight fails

// ✅ Use the cors middleware which handles OPTIONS automatically
const cors = require('cors');
app.use(cors({
  origin: 'https://app.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
}));
// cors() responds to preflight OPTIONS requests before your routes

কারণ 2: বিপরীত প্রক্সি স্ট্রিপ বা ব্লক বিকল্প

# nginx — explicitly handle OPTIONS preflight
location /api/ {
    # Handle preflight
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Max-Age' 86400 always;
        add_header 'Content-Length' 0;
        return 204;   # respond to preflight with 204 No Content
    }

    proxy_pass http://localhost:3000;
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
}

কারণ 3: শংসাপত্র সহ ওয়াইল্ডকার্ড মূল

// 🐛 Wildcard origin CANNOT be used with credentials
app.use(cors({
  origin: '*',              // ❌ fails when credentials: true
  credentials: true,
}));
// Browser error: "Access-Control-Allow-Origin cannot be '*' when
// credentials mode is 'include'"

// ✅ Specify the exact origin
app.use(cors({
  origin: 'https://app.example.com',   // exact origin, not *
  credentials: true,
}));

// ✅ For multiple origins, echo the matching one
const allowed = ['https://app.example.com', 'https://admin.example.com'];
app.use(cors({
  origin: (origin, cb) => {
    if (!origin || allowed.includes(origin)) cb(null, true);
    else cb(new Error('Not allowed by CORS'));
  },
  credentials: true,
}));

কারণ 4: অনুমোদিত শিরোনাম অনুপস্থিত

// The preflight lists headers the real request will send.
// The server must allow ALL of them, or preflight fails.

// 🐛 Real request sends Authorization but server doesn't allow it
allowedHeaders: ['Content-Type'],   // missing Authorization

// ✅ Allow every custom header your client sends
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'X-API-Key'],

// Check the browser's preflight to see what's requested:
// Access-Control-Request-Headers: authorization, content-type
// The server's Access-Control-Allow-Headers must include all of these

কারণ 5: Auth Middleware চলে CORS এর আগে

// 🐛 Auth middleware rejects the OPTIONS preflight (no auth header on preflight!)
app.use(authenticate);   // blocks OPTIONS with 401
app.use(cors());

// ✅ CORS must come BEFORE auth so preflight passes
app.use(cors({ origin: 'https://app.example.com', credentials: true }));
app.use(authenticate);   // preflight already handled by cors()
// Preflight OPTIONS requests carry no credentials by design —
// they must not be blocked by auth

ডিবাগিং প্রিফ্লাইট ব্যর্থতা

# Simulate the preflight with curl to see the server response
curl -X OPTIONS https://api.example.com/users \
  -H "Origin: https://app.example.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type, Authorization" \
  -i

# Check the response has:
# HTTP/1.1 204 (or 200)  ← must be 2xx
# Access-Control-Allow-Origin: https://app.example.com  ← matches
# Access-Control-Allow-Methods: ...POST...  ← includes your method
# Access-Control-Allow-Headers: ...content-type, authorization...

প্রায়শই জিজ্ঞাসিত প্রশ্ন

প্রশ্ন: কেন এটি dev এ কাজ করে কিন্তু উৎপাদনে ব্যর্থ হয়?
উত্তর: ডেভেলপমেন্ট প্রায়শই একটি প্রক্সি (Vite/CRA) ব্যবহার করে যা CORS সম্পূর্ণভাবে এড়িয়ে যায়, অথবা একটি অনুমতিমূলক dev CORS কনফিগারেশন। উত্পাদনের একটি বাস্তব বিপরীত প্রক্সি (nginx) এবং কঠোর কনফিগার রয়েছে যেখানে প্রিফ্লাইট পরিচালনা অবশ্যই স্পষ্ট হতে হবে।

প্রশ্ন: কেন আমার বিকল্প অনুরোধ 401 ফেরত দেয়?
উত্তর: আপনার প্রমাণীকরণ মিডলওয়্যার CORS-এর আগে চলছে এবং প্রিফ্লাইট প্রত্যাখ্যান করছে (যা ডিজাইন অনুসারে কোনো শংসাপত্র বহন করে না)। অনুমোদনের আগে CORS মিডলওয়্যার রাখুন যাতে প্রিফ্লাইট অনুরোধগুলি পাস হয়।

প্রশ্ন: কি স্ট্যাটাস কোড প্রিফ্লাইট রিটার্ন করা উচিত?
A: 204 (কোন বিষয়বস্তু নেই) বা 200. যেকোনো 2xx কাজ করে। একটি 404, 405, বা 401 মানে প্রিফ্লাইট ব্যর্থ হয়েছে এবং ব্রাউজার আসল অনুরোধ ব্লক করে।

প্রশ্ন: আমি কি nginx বা অ্যাপে CORS হেডার সেট করব — উভয়ই নয়?
উত্তর: একটি জায়গা বেছে নিন। সদৃশAccess-Control-Allow-Origin হেডার (এনজিনএক্স এবং এক্সপ্রেস উভয় থেকে) ব্রাউজারকে প্রতিক্রিয়া প্রত্যাখ্যান করে। nginx বা অ্যাপটি ব্যবহার করুন, উভয়ই নয়।

প্রশ্ন: আমি কীভাবে শংসাপত্র (কুকি) ক্রস-অরিজিনকে অনুমতি দেব?
উঃ সেটAccess-Control-Allow-Credentials: true এবং সার্ভারে একটি সঠিক উৎপত্তি (না ) উল্লেখ করুন এবং*ব্যবহার করুন৷ ক্লায়েন্ট আনয়ন মধ্যে. তিনটিই একসাথে প্রয়োজন।credentials: 'include'উপসংহার

উত্পাদনে CORS প্রিফ্লাইট ব্যর্থতাগুলি সাধারণত থেকে আসে: সার্ভার বিকল্পগুলি পরিচালনা করছে না, একটি বিপরীত প্রক্সি এটিকে ব্লক করছে, শংসাপত্র সহ ওয়াইল্ডকার্ডের উত্স, অনুমোদিত শিরোনাম অনুপস্থিত, বা প্রমাণ মিডলওয়্যার প্রিফ্লাইট প্রত্যাখ্যান করছে৷ সংশোধন:

ব্যবহার করুন মিডলওয়্যার (বা সুস্পষ্ট nginx বিকল্প পরিচালনা), শংসাপত্রগুলি ব্যবহার করার সময় সঠিক উত্স নির্দিষ্ট করুন, আপনার ক্লায়েন্টের পাঠানো প্রতিটি শিরোনামকে অনুমতি দিন এবং প্রমাণীকরণ মিডলওয়্যারের আগে CORS রাখুনcors. একটিদিয়ে ডিবাগ করুন৷ সার্ভার ঠিক কী ফেরত দেয় তা দেখার জন্য অনুরোধ করুন — প্রিফ্লাইটকে অবশ্যই CORS হেডারের সাথে 2xx সাড়া দিতে হবে।curl -X OPTIONSদিয়ে ডিবাগ করুন৷ সার্ভার ঠিক কী ফেরত দেয় তা দেখার জন্য অনুরোধ করুন — প্রিফ্লাইটকে অবশ্যই CORS হেডারের সাথে 2xx সাড়া দিতে হবে।