কিভাবে 2026 সালে CORS ত্রুটি ‘নো অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন’ হেডার ঠিক করবেন

আপনি আপনার ফ্রন্টএন্ড থেকে একটি API এ একটি অনুরোধ করেন এবং ব্রাউজার এটিকে এর সাথে ব্লক করে:Access to fetch at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. এটি ওয়েব ডেভেলপমেন্টের সবচেয়ে সাধারণ এবং ভুল বোঝার ত্রুটিগুলির মধ্যে একটি। এখানে আসলে এটির কারণ কী এবং কীভাবে এটি সঠিকভাবে ঠিক করা যায়।

CORS আসলে কি

CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) হল একটি ব্রাউজার নিরাপত্তা ব্যবস্থা। আপনার জাভাস্ক্রিপ্ট চালু হলেhttps://app.example.com একটি অনুরোধ করেhttps://api.other.com, ব্রাউজার এটিকে ক্রস-অরিজিন রিকোয়েস্ট হিসেবে বিবেচনা করে এবং সার্ভারকে রেসপন্স হেডারের মাধ্যমে এটিকে স্পষ্টভাবে অনুমতি দিতে হবে। যদি সার্ভার একটিAccess-Control-Allow-Originপাঠায় না শিরোনাম যা আপনার মূল অন্তর্ভুক্ত করে, ব্রাউজার প্রতিক্রিয়া ব্লক করে — এমনকি সার্ভারটি অনুরোধটি সফলভাবে প্রক্রিয়া করলেও।

মূল অন্তর্দৃষ্টি:CORS ব্রাউজার দ্বারা প্রয়োগ করা হয়, এবং ফিক্স সার্ভারে থাকে, আপনার ফ্রন্টএন্ড কোডে নয়। আপনি একা আপনার আনা কল পরিবর্তন করে একটি CORS ত্রুটি ঠিক করতে পারবেন না।

ফিক্স 1: হেডার পাঠাতে সার্ভার কনফিগার করুন

সঠিক সমাধান হল সঠিক CORS শিরোনামগুলির সাথে API-কে প্রতিক্রিয়া জানানো। এক্সপ্রেসে,corsব্যবহার করুন মিডলওয়্যার:

const cors = require('cors');

app.use(cors({
  origin: 'https://app.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

সেটorigin আপনার ফ্রন্টএন্ডের সঠিক উৎপত্তিতে। ওয়াইল্ডকার্ড ব্যবহার করবেন না* প্রোডাকশনে আপনি যদি শংসাপত্র পাঠান (কুকিজ বা প্রমাণীকরণ শিরোনাম) — ব্রাউজারগুলিAccess-Control-Allow-Origin: *এর সংমিশ্রণ প্রত্যাখ্যান করে সাথেcredentials: true.

ফিক্স 2: প্রিফ্লাইট (বিকল্প) অনুরোধগুলি পরিচালনা করুন

যেকোন অনুরোধের জন্য যা একটি সাধারণ GET/POST নয় — যেমন একটি যে পাঠায়Content-Type: application/json অথবা একটিAuthorization শিরোনাম — ব্রাউজার প্রথমে একটি প্রিফ্লাইট পাঠায়OPTIONS অনুমতি চাওয়ার অনুরোধ। আপনার সার্ভার অবশ্যই উপযুক্ত শিরোনাম সহ এটির প্রতিক্রিয়া জানাতে হবে।cors উপরের মিডলওয়্যার এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে, কিন্তু আপনি যদি ম্যানুয়ালি হেডার সেট করেন, তাহলে আপনাকে অবশ্যই বিকল্পগুলি স্পষ্টভাবে পরিচালনা করতে হবে:

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');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204); // Respond to preflight, do not fall through
  }
  next();
});

একটি সাধারণ ভুল হল OPTIONS preflight-এ সাড়া দিতে ব্যর্থ হচ্ছে — ব্রাউজার এটি পাঠায়, কোন বৈধ CORS প্রতিক্রিয়া পায় না এবং প্রকৃত অনুরোধটি তৈরি হওয়ার আগেই ব্লক করে দেয়।

ফিক্স 3: মূলের সাথে সঠিকভাবে মেলে

উৎপত্তি অবশ্যই সঠিকভাবে মিলবে — প্রোটোকল, ডোমেইন এবং পোর্ট সব গণনা। এই সব ব্রাউজার থেকে ভিন্ন উত্স:

যদি আপনার অনুমোদিত মূল হয়https://example.com কিন্তু আপনার অ্যাপhttps://www.example.comথেকে লোড হয় , CORS এটি ব্লক করে। প্রতিটি অরিজিন অ্যাপ যেটি আসলে ব্যবহার করে তা মঞ্জুর করুন বা একটিতে স্বাভাবিক করুন।

ফিক্স 4: একাধিক ফ্রন্টেন্ডের জন্য একটি ডায়নামিক অরিজিন ব্যবহার করুন

যদি একাধিক অরিজিন অ্যাক্সেসের প্রয়োজন হয় (স্টেজিং, প্রোডাকশন, লোকালহোস্ট), তাহলে হার্ডকোডিং এর পরিবর্তে একটি অনুমোদিত তালিকার বিরুদ্ধে যাচাই করুন:

const allowed = [
  'https://app.example.com',
  'https://staging.example.com',
  'http://localhost:3000'
];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowed.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true
}));

ফিক্স 5: স্থানীয় ডেভের জন্য, একটি প্রক্সি ব্যবহার করুন

বিকাশের সময়, আপনি আপনার ডেভ সার্ভারের মাধ্যমে API অনুরোধগুলি প্রক্সি করে CORS এড়িয়ে যেতে পারেন যাতে সেগুলি একই-অরিজিন দেখায়। ভিটে:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
};

এখন আপনার ফ্রন্টএন্ড কল করছে/api/... এর নিজস্ব উৎপত্তিতে এবং dev সার্ভার এটিকে এগিয়ে দেয়। এটি একটি উন্নয়ন সুবিধা, একটি উত্পাদন ফিক্স নয় — উত্পাদন এখনও API এ সঠিক CORS শিরোনাম প্রয়োজন।

কি করা উচিত নয়

CORS অক্ষম করে এমন ব্রাউজার এক্সটেনশনের কাছে পৌঁছাবেন না এবং থাপ্পড় দেবেন নাAccess-Control-Allow-Origin: * ত্রুটি অদৃশ্য করতে সবকিছুতে। ওয়াইল্ডকার্ড আপনার APIকে ইন্টারনেটের প্রতিটি সাইটে প্রকাশ করে এবং শংসাপত্রযুক্ত অনুরোধগুলি ভেঙে দেয়। CORS হল একটি নিরাপত্তা বৈশিষ্ট্য — এটি নিষ্ক্রিয় করার পরিবর্তে সঠিকভাবে কনফিগার করুন।

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

প্রশ্ন: কেন অনুরোধ পোস্টম্যানে কাজ করে কিন্তু ব্রাউজারে নয়?
উত্তর: পোস্টম্যান CORS প্রয়োগ করে না – শুধুমাত্র ব্রাউজারগুলি করে। সার্ভারে পৌঁছানোর অনুরোধ প্রমাণ করে যে সার্ভার কাজ করে; ব্রাউজার প্রতিক্রিয়া ব্লক করে কারণ CORS শিরোনাম অনুপস্থিত। সার্ভারে হেডার ঠিক করুন।

প্রশ্ন: আমি কি ফ্রন্টএন্ড থেকে CORS ঠিক করতে পারি?
উত্তর: না। CORS শিরোনাম অবশ্যই সার্ভার থেকে অনুরোধে সাড়া দিতে হবে। একমাত্র ফ্রন্টএন্ড-সাইড ওয়ার্কঅ্যারাউন্ড হল একটি ডেভ প্রক্সি, যা ডেভেলপমেন্টের সময় একই-অরিজিন অনুরোধ করে।

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

প্রশ্ন: কেন শংসাপত্র: আসল ‘*’ এর সাথে সত্য ভেঙ্গে যায়?
A: ব্রাউজাররা শংসাপত্র (কুকিজ, প্রমাণপত্র) পাঠাতে নিষেধ করে যখন অনুমোদিত মূল ওয়াইল্ডকার্ড হয়*. আপনার শংসাপত্রের প্রয়োজন হলে এর পরিবর্তে সঠিক উত্স নির্দিষ্ট করুন৷

প্রশ্ন: শিরোনাম আছে কিন্তু এটি এখনও ব্যর্থ হয়. কেন?
উত্তর: পরীক্ষা করুন যে উৎপত্তিটি হুবহু মেলে (প্রটোকল, ডোমেইন, পোর্ট), যে OPTIONS প্রিফ্লাইট পরিচালনা করা হয়েছে এবং সামনে একটি প্রক্সি বা CDN শিরোনামটি খুলে ফেলছে না। নেটওয়ার্ক ট্যাবে প্রকৃত প্রতিক্রিয়া শিরোনাম পরিদর্শন করুন।

উপসংহার

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