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

ত্রুটি“অরিজিন থেকে ‘…’ এ আনার অ্যাক্সেস CORS নীতি দ্বারা অবরুদ্ধ করা হয়েছে: কোনো ‘অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন’ হেডার নেই” সবচেয়ে সাধারণ ওয়েব ডেভেলপমেন্ট ত্রুটি এক. এটি একটি নিরাপত্তা ব্যবস্থা হিসাবে ব্রাউজার দ্বারা প্রয়োগ করা হয়েছে। এখানে প্রতিটি কারণ এবং ফিক্স আছে.

কেন CORS বিদ্যমান (প্রয়োজনীয় বোঝাপড়া)

CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) ক্ষতিকারক ওয়েবসাইটগুলিকে আপনার লগ-ইন করা কুকিজ ব্যবহার করে আপনার ব্যাঙ্কের API-তে অনুরোধ করতে বাধা দেয়। CORS ব্যতীত, evil.com পরিদর্শন করা আপনার সেশন কুকিজ সহ আপনারব্যাঙ্ক.com-এ নীরবে API কল করতে পারে। ব্রাউজারটি CORS প্রয়োগ করে — সার্ভারগুলি ঘোষণা করে যে কোন উত্স অনুমোদিত।

CORS হল একটি ব্রাউজার নিরাপত্তা বৈশিষ্ট্য — এটি শুধুমাত্র ব্রাউজার দ্বারা শুরু করা অনুরোধের ক্ষেত্রে প্রযোজ্য। কার্ল, পোস্টম্যান এবং সার্ভার থেকে সার্ভার অনুরোধ CORS দ্বারা প্রভাবিত হয় না।

ঠিক 1: Express.js — কর্স প্যাকেজ ব্যবহার করে

npm install cors

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

// ✅ Allow specific origin (recommended for production)
app.use(cors({
 origin: 'https://yourfrontend.com',
 methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
 allowedHeaders: ['Content-Type', 'Authorization'],
 credentials: true, // required if frontend sends cookies/auth headers
}));

// ✅ Allow multiple origins
const allowedOrigins = ['https://app.example.com', 'https://admin.example.com'];
app.use(cors({
 origin: (origin, callback) => {
 if (!origin || allowedOrigins.includes(origin)) {
 callback(null, true);
 } else {
 callback(new Error(`Origin ${origin} not allowed by CORS`));
 }
 },
 credentials: true,
}));

// ❌ Allow all origins (never in production with credentials)
app.use(cors({ origin: '*' }));
// Note: wildcard '*' cannot be used with credentials: true

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

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

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

ফিক্স 3: Nginx রিভার্স প্রক্সি

location /api/ {
 proxy_pass http://localhost:3000/;

 # CORS headers
 add_header 'Access-Control-Allow-Origin' 'https://yourfrontend.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;

 # Handle preflight
 if ($request_method = 'OPTIONS') {
 add_header 'Access-Control-Allow-Origin' 'https://yourfrontend.com';
 add_header 'Access-Control-Max-Age' 1728000;
 add_header 'Content-Type' 'text/plain charset=UTF-8';
 add_header 'Content-Length' 0;
 return 204;
 }
}

ফিক্স 4: ফ্রন্টেন্ড — শংসাপত্র মোড

// ❌ Fetch without credentials — cookies not sent
const res = await fetch('https://api.example.com/user');

// ✅ Include credentials (cookies, authorization headers)
const res = await fetch('https://api.example.com/user', {
 credentials: 'include', // send cookies cross-origin
});

// For axios:
axios.defaults.withCredentials = true;
// Or per-request:
axios.get('/api/user', { withCredentials: true });

গুরুত্বপূর্ণ: কখনcredentials: 'include', সার্ভার অবশ্যই সেট করতে হবেAccess-Control-Allow-Origin নির্দিষ্ট উৎপত্তিতে (না ) এবং*প্রিফ্লাইট অনুরোধ বোঝাAccess-Control-Allow-Credentials: true.

“অ-সরল” অনুরোধের জন্য (পুট, মুছে ফেলুন, কাস্টম হেডার, অ্যাপ্লিকেশন/জেসন বডি), প্রকৃত অনুরোধ অনুমোদিত কিনা তা পরীক্ষা করার জন্য ব্রাউজার প্রথমে একটি বিকল্প প্রিফ্লাইট অনুরোধ পাঠায়। প্রিফ্লাইট ব্যর্থ হলে, প্রকৃত অনুরোধ কখনই কার্যকর হয় না।

ডেভেলপমেন্ট প্রক্সি (উন্নয়নের সময় CORS এড়িয়ে চলুন)

// Browser sends OPTIONS before POST with JSON body:
OPTIONS /api/users HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

// Server must respond:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400 // cache preflight for 24 hours

প্রক্সিটি ফ্রন্টএন্ড (ডেভ সার্ভার থেকে) থেকে একই উত্স থেকে অনুরোধ করে, বিকাশের সময় সম্পূর্ণভাবে CORS-কে বাইপাস করে — উৎপাদন নিরাপত্তার সঙ্গে আপস না করে।

// vite.config.ts — proxy /api to backend during dev
export default {
 server: {
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 rewrite: (path) => path.replace(/^/api/, ''),
 }
 }
 }
};

// package.json (Create React App) — proxy all /api requests
{
 "proxy": "http://localhost:3000"
}

সাধারণ ভুল

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

// ❌ Mistake 1: CORS headers on wrong route
app.get('/api/data', (req, res) => {
 res.header('Access-Control-Allow-Origin', '*');
 res.json(data);
});
// OPTIONS preflight hits a different handler that doesn't have CORS headers

// ❌ Mistake 2: Setting headers after response sent
app.use(cors());
app.get('/data', authenticate, (req, res) => {
 res.header('Access-Control-Allow-Origin', '*'); // Too late if cors() runs first
});

// ❌ Mistake 3: Multiple conflicting CORS headers
// Browser rejects when two Access-Control-Allow-Origin headers present
// Don't set CORS in both nginx AND Express — pick one place

প্রশ্ন: আমি কি বিকাশের জন্য ব্রাউজারে CORS অক্ষম করতে পারি?

উঃ হ্যাঁঃ
. শুধুমাত্র স্থানীয় ডেভের জন্য — এই পতাকা দিয়ে বাস্তব সাইট ব্রাউজ করবেন না। একটি প্রক্সি ব্যবহার করা নিরাপদ এবং নিরাপত্তা নিষ্ক্রিয় করার প্রয়োজন নেই৷open -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/chrome-dev"প্রশ্নঃ কেন এটি পোস্টম্যানে কাজ করে কিন্তু ব্রাউজারে নয়?

উত্তর: CORS শুধুমাত্র ব্রাউজার দ্বারা প্রয়োগ করা হয়। পোস্টম্যান একটি ব্রাউজার CORS চেক ছাড়াই সরাসরি অনুরোধ পাঠায়। এটি নিশ্চিত করে যে আপনার সার্ভার কাজ করছে — আপনাকে শুধু CORS হেডার যোগ করতে হবে।
প্রশ্ন: আমার কি অ্যাপ্লিকেশনে বা বিপরীত প্রক্সিতে CORS শিরোনাম যোগ করা উচিত?

উত্তর: শুধুমাত্র একটি জায়গা। nginx ব্যবহার করলে, nginx-এ হেডার যোগ করুন এবং এক্সপ্রেস এ যোগ করবেন না (ডুপ্লিকেট হেডার প্রতিরোধ করে)। যদি nginx নিয়ন্ত্রণ ছাড়াই একটি পরিষেবাতে স্থাপন করা হয়, Express-এ যোগ করুন।
প্রশ্ন: কেন আমার API একই উত্স থেকে কাজ করে কিন্তু ক্রস-অরিজিন নয়?

উত্তর: CORS রোধ করে ঠিক এটিই — ক্রস-অরিজিন অনুরোধের জন্য সার্ভারের সুস্পষ্ট অনুমতি প্রয়োজন। একই-অরিজিন অনুরোধের (একই ডোমেন/পোর্টে ফ্রন্টএন্ড এবং API) CORS হেডারের প্রয়োজন নেই।
প্রশ্ন: আমি কি একটি CORS প্রক্সি পরিষেবা ব্যবহার করতে পারি?

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

সঠিক

যোগ করে CORS ঠিক করুন আপনার সার্ভারে হেডার – CORS অক্ষম করে বা ব্রাউজার প্লাগইন ব্যবহার করে নয়। Express.js এর জন্য,Access-Control-Allow-Origin npm প্যাকেজ সমস্ত ক্ষেত্রে পরিষ্কারভাবে পরিচালনা করে। Nginx এর জন্য, প্রক্সি লেভেলে হেডার যোগ করুন। উন্নয়নের জন্য, CORS সম্পূর্ণরূপে এড়াতে Vite এর প্রক্সি কনফিগারেশন ব্যবহার করুন। ওয়াইল্ডকার্ডের পরিবর্তে সর্বদা সঠিক উত্স উল্লেখ করুনcors উৎপাদনে, বিশেষ করে শংসাপত্র ব্যবহার করার সময়।* উৎপাদনে, বিশেষ করে শংসাপত্র ব্যবহার করার সময়।