درک کنید CORS (اشتراک گذاری منابع متقابل) چیست

معرفی

در توسعه وب مدرن، معمولاً برنامه ها نیاز به تعامل با منابع میزبانی شده در دامنه های مختلف دارند. با این حال، به دلیل نگرانی‌های امنیتی، مرورگرها یک سیاست همان مبدأ را پیاده‌سازی می‌کنند که نحوه تعامل اسناد یا اسکریپت‌های بارگذاری‌شده از یک مبدأ با منابع دیگر را محدود می‌کند. CORS (به اشتراک گذاری منابع متقاطع) مکانیزمی است که به سرورها اجازه می دهد تا به طور ایمن مشخص کنند که کدام منبع مجاز به دسترسی به منابع خود هستند.

CORS چیست؟

CORS مجموعه‌ای از هدرهای HTTP است که به سرور اجازه می‌دهد تا مشخص کند کدام منبع مجاز به دسترسی به منابع روی سرور است. هنگامی که یک برنامه مشتری (مانند یک مرورگر) درخواستی را به منبعی که در دامنه دیگری میزبانی شده است، ارسال می کند، مرورگر یک درخواست پیش از پرواز به سرور می فرستد و از او می پرسد که آیا برنامه اصلی مجوز دسترسی به منبع را دارد.

عملیات CORS

درخواست قبل از پرواز

برای درخواست‌های خاص (مخصوصاً آنهایی که «ساده» در نظر گرفته نمی‌شوند)، مرورگر ابتدا یک درخواست پیش‌بررسی با استفاده از روش HTTP OPTIONS ارسال می‌کند. این درخواست شامل سرفصل هایی مانند:

• Origin: مبدأ درخواست را نشان می دهد.
• Access-Control-Request-Method: روش HTTP که در درخواست واقعی استفاده خواهد شد.
• Access-Control-Request-Headers: هدرهای HTTP که در درخواست واقعی ارسال می شوند.

پاسخ را از قبل بررسی کنید

سرور به درخواست پیش‌بررسی با سربرگ‌هایی پاسخ می‌دهد که نشان می‌دهد آیا درخواست واقعی مجاز است یا خیر:

• Access-Control-Allow-Origin: نشان می دهد که کدام منابع می توانند به منبع دسترسی داشته باشند. این می تواند یک دامنه خاص یا یک ستاره باشد
• Access-Control-Allow-Methodsاجازه دادن به همه ریشه ها
• Access-Control-Allow-Headers: روش های HTTP مجاز را فهرست می کند (مانند GET، POST، PUT، DELETE).
• Access-Control-Allow-Credentials: سرصفحه هایی را که می توان در درخواست واقعی استفاده کرد را فهرست می کند.
• Access-Control-Max-Age: نشان می دهد که آیا اعتبارنامه ها (مانند کوکی ها) می توانند در درخواست گنجانده شوند یا خیر.

: نشان می دهد که چه مدت پاسخ بررسی اولیه توسط مرورگر می تواند ذخیره شود.

درخواست های ساده Acceptدرخواست هایی که توسط استاندارد CORS “ساده” در نظر گرفته می شوند نیازی به بررسی اولیه ندارند. برای اینکه یک درخواست ساده باشد، باید از یکی از روش های GET، POST یا HEAD استفاده کند و فقط باید حاوی سرصفحه های ایمن مانند Content-Type ،

(با مقادیر معین)، از جمله.

نمونه های سرصفحه CORS

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

از حالت تمام صفحه خارج شوید

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

از حالت تمام صفحه خارج شوید

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

از حالت تمام صفحه خارج شوید

پیاده سازی سمت سرور

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

const corsOptions = {
  origin: 'https://example.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type'],
  credentials: true
};

app.use(cors(corsOptions));

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for https://example.com' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

از حالت تمام صفحه خارج شوید

نتیجه