কিভাবে অ্যাক্সেস-কন্ট্রোল-অনুমতি-অরিজিন অনুপস্থিত হেডার CORS ত্রুটি ঠিক করবেন

ত্রুটিঅনুরোধকৃত রিসোর্সে কোনো ‘অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন’ হেডার নেই সবচেয়ে সাধারণ CORS ত্রুটি। এর মানে ব্রাউজারটি আপনার ক্রস-অরিজিন অনুরোধ ব্লক করেছে কারণ সার্ভার বলে নি এটি অনুমোদিত। এখানে এটি সঠিকভাবে ঠিক কিভাবে.

কেন এটা ঘটে

ব্রাউজার নিরাপত্তার জন্য একই-অরিজিন নীতি প্রয়োগ করে — -এ একটি পৃষ্ঠা৷ অবাধে অনুরোধ করতে পারে নাapp.example.com. ক্রস-অরিজিন অনুরোধের জন্য, সার্ভারে অবশ্যই একটিapi.other.comঅন্তর্ভুক্ত করতে হবে শিরোনাম বলছে কোন উত্স অনুমোদিত। এটি অনুপস্থিত থাকলে, ব্রাউজার প্রতিক্রিয়াটি ব্লক করে এবং এই ত্রুটিটি দেখায়।Access-Control-Allow-Originমূল পয়েন্ট:

এটি ব্রাউজার দ্বারা প্রয়োগ করা হয়েছে এবং সার্ভারে স্থির করা হয়েছে৷ ক্লায়েন্ট এই শিরোনাম যোগ করতে পারে না — সার্ভার এটি পাঠাতে হবে।ঠিক 1: কর্স প্যাকেজ দিয়ে প্রকাশ করুন

ফিক্স 2: এক্সপ্রেস ম্যানুয়াল হেডার

npm install cors

const cors = require('cors');

// Allow all origins (development only)
app.use(cors());

// ✅ Production: allow specific origin
app.use(cors({
  origin: 'https://app.example.com',
}));

// ✅ Multiple allowed origins
const allowed = ['https://app.example.com', 'https://admin.example.com'];
app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowed.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
}));

ফিক্স 3: Nginx

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://app.example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // Handle preflight OPTIONS requests
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

ফিক্স 4: শংসাপত্র সহ (কুকিজ/প্রমাণ)

location /api/ {
    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;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
        add_header 'Access-Control-Max-Age' 86400;
        return 204;
    }

    proxy_pass http://localhost:3000;
}

ডেভেলপমেন্ট প্রক্সি বিকল্প

// When sending cookies or auth headers cross-origin:

// Server: exact origin (NOT wildcard) + allow credentials
app.use(cors({
  origin: 'https://app.example.com',   // must be exact, not '*'
  credentials: true,
}));

// Client: include credentials
fetch('https://api.example.com/data', {
  credentials: 'include',
});

// ❌ This combination FAILS:
// origin: '*' with credentials: true
// The browser rejects wildcard origin when credentials are included

সাধারণ ভুল

// Avoid CORS during development entirely with a dev proxy

// vite.config.ts
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
};
// Frontend calls /api/... which the dev server proxies to your backend -
// same origin, no CORS. (Production still needs proper CORS headers.)

ডিবাগিং

// 🐛 Setting CORS headers in BOTH nginx and Express
// Results in duplicate Access-Control-Allow-Origin headers,
// which the browser rejects. Set them in ONE place.

// 🐛 Wildcard with credentials
res.header('Access-Control-Allow-Origin', '*');   // fails with credentials

// 🐛 Forgetting to handle OPTIONS preflight
// PUT/DELETE/JSON requests send a preflight OPTIONS first -
// it must get a valid CORS response too

// 🐛 Trying to fix it in the frontend
// You CANNOT add Access-Control-Allow-Origin from client code -
// it must come from the server

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

# Check what headers the server actually returns
curl -I -H "Origin: https://app.example.com" https://api.example.com/data

# Look for:
# Access-Control-Allow-Origin: https://app.example.com  ← should be present

# If it's missing, the server isn't configured correctly.
# If it's the wrong origin, fix the server's allowed origins.

প্রশ্ন: কেন আমি আমার ফ্রন্টএন্ড কোডে এটি ঠিক করতে পারি না?

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

উত্তর: CORS শুধুমাত্র ব্রাউজার দ্বারা প্রয়োগ করা হয়। পোস্টম্যান এবং কার্ল ব্রাউজারের CORS চেক ছাড়াই সরাসরি অনুরোধ করে। এটি নিশ্চিত করে যে আপনার সার্ভার কাজ করে — আপনাকে শুধু ব্রাউজার ক্লায়েন্টদের জন্য CORS হেডার যোগ করতে হবে।
প্রশ্নঃ আমার কি শুধু Access-Control-Allow-Origin ব্যবহার করা উচিত: *?

উত্তর: শুধুমাত্র সত্যিকারের পাবলিক API-এর জন্য কোন শংসাপত্র নেই। প্রমাণীকরণ বা কুকিজ সহ যেকোনো কিছুর জন্য, আপনাকে অবশ্যই সঠিক উৎস উল্লেখ করতে হবে (ওয়াইল্ডকার্ড শংসাপত্রের সাথে ব্যর্থ হয়)। সঠিক উত্স নির্দিষ্ট করা আরও নিরাপদ — ব্যবহার করবেন না
প্রমাণীকৃত API-এর জন্য উৎপাদনে।*প্রশ্ন: কোথায় আমার CORS হেডার সেট করা উচিত — nginx বা অ্যাপ?

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

A: JSON বডি বা কাস্টম হেডার সহ PUT/DELETE এবং অনুরোধগুলি একটি preflight OPTIONS অনুরোধ ট্রিগার করে। আপনার সার্ভারকে অবশ্যই বৈধ CORS শিরোনাম সহ বিকল্পগুলিতে প্রতিক্রিয়া জানাতে হবে৷ নিশ্চিত করুন যে আপনার CORS কনফিগ শুধুমাত্র GET/POST নয়, OPTIONS পদ্ধতি পরিচালনা করে৷
উপসংহার

“কোন ‘অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন’ শিরোনাম নেই” মানে সার্ভার ব্রাউজারকে জানায়নি যে আপনার ক্রস-অরিজিন অনুরোধ অনুমোদিত। সমাধান সর্বদা সার্ভারে থাকে:

যোগ করুন কর্স প্যাকেজ (এক্সপ্রেস), ম্যানুয়াল হেডার বা nginx কনফিগারেশনের মাধ্যমে হেডারAccess-Control-Allow-Origin, সঠিক উত্স নির্দিষ্ট করে (প্রমাণপত্র ব্যবহার করার সময় প্রয়োজনীয়)। OPTIONS প্রিফ্লাইট অনুরোধগুলি পরিচালনা করুন, সদৃশ এড়াতে CORS শুধুমাত্র একটি স্তরে সেট করুন এবং মনে রাখবেন আপনি ফ্রন্টএন্ড কোড থেকে এটি ঠিক করতে পারবেন না। ডেভেলপমেন্টের জন্য, একটি ডেভ-সার্ভার প্রক্সি সম্পূর্ণভাবে CORS এড়িয়ে চলে — কিন্তু উৎপাদনের জন্য সর্বদা সঠিক সার্ভার-সাইড CORS হেডার প্রয়োজন।, সঠিক উত্স নির্দিষ্ট করে (প্রমাণপত্র ব্যবহার করার সময় প্রয়োজনীয়)। OPTIONS প্রিফ্লাইট অনুরোধগুলি পরিচালনা করুন, সদৃশ এড়াতে CORS শুধুমাত্র একটি স্তরে সেট করুন এবং মনে রাখবেন আপনি ফ্রন্টএন্ড কোড থেকে এটি ঠিক করতে পারবেন না। ডেভেলপমেন্টের জন্য, একটি ডেভ-সার্ভার প্রক্সি সম্পূর্ণভাবে CORS এড়িয়ে চলে — কিন্তু উৎপাদনের জন্য সর্বদা সঠিক সার্ভার-সাইড CORS হেডার প্রয়োজন।