کورس توضیح داد: از جعبه های اسباب بازی گرفته تا اجرای فنی

🧠 کورس توضیح داد مثل 5 شما

این را تصور کنید: شما جعبه اسباب بازی (وب سایت شما در مرورگر در حال اجرا است) ، و شما عاشق بازی با خود هستید اسباب بازی های خود (داده های خود شما).

یک روز ، شما سعی می کنید یک اسباب بازی را از خود بگیرید جعبه اسباب بازی دوست (داده های وب سایت دیگر).
اما شما مامان (مرورگر) شما را متوقف می کند و می گوید:

“نگه دارید! من نمی دانم پدر و مادر دوست شما گفتند که برای شما اشکالی ندارد که اسباب بازی های آنها را قرض بگیرید!”

اینجاست CORS (اشتراک منابع متقاطع) وارد می شود

🧑‍🍳 سرور = والدین دوست شما
وقتی سعی می کنید اسباب بازی را بگیرید ، خود مامان فقط توسط خودش “بله” یا “نه” نگوید.
او در واقع از شما می پرسد والدین دوست (سرور):

“سلام ، اشکالی ندارد اگر بچه من با اسباب بازی های بچه های شما بازی کند؟”

اگر والدین دوست شما می گوید:

📝 “مطمئنا! من یک لغزش مجوز (سرصفحه های کر) نوشتم که می گوید اشکالی ندارد!”

سپس شما مامان به شما اجازه می دهد اسباب بازی را بگیرید و با آن بازی کنید. 🎉
اما اگر والدین دوست شما می گوید:

❌ “نه. اسباب بازی های بچه های من فقط برای آنهاست و نه برای هر کس دیگری.”

سپس مادر شما شما را متوقف می کند و می گوید:

“ببخشید ، بدون اجازه ، بازی!”

بنابراین اساساً:

• ✅ همان جعبه اسباب بازی؟ مشکلی نیست
• box جعبه اسباب بازی های مختلف؟ نیاز به مجوز (CORS).
• 🔒 مجوز؟ بدون بازی!

cors cors چیست؟

CORS (اشتراک منابع متقاطع) است ویژگی امنیتی که توسط مرورگرها اجرا می شودبشر این نحوه عملکرد یک صفحه وب در یک را کنترل می کند مبدا (پروتکل + دامنه + پورت) می تواند درخواست کند منشأ متفاوتبشر

به طور پیش فرض ، مرورگرها به دلایل امنیتی درخواست های متقاطع را که از JavaScript ساخته شده است ، مسدود می کنند.

🌐 “مبدا” چیست؟

مبدا شامل:

• پروتکل: http:// در مقابل https://
• حوزه: example.com در مقابل api.example.com
• بندر: :80 در مقابل :8080

اگر هر یک از اینها متفاوت است، این یک محسوب می شود درخواست مبداء متقاطع و قوانین CORS اعمال می شود.

📍 سناریوی مثال

شما یک برنامه جلوی میزبان در:

• جبهه: https://myfrontend.com

و شما سعی می کنید داده ها را از:

• API با پشتوانه: https://api.othersite.com/data

از آنجا که دامنه ها متفاوت هستند ، این یک درخواست متقاطع است. مگر اینکه https://api.othersite.com صریحاً اجازه می دهد ، مرورگر درخواست را مسدود کنیدبشر

✅ نحوه کار CORS

هنگامی که مرورگر یک درخواست متقاطع را مشاهده می کند ، ممکن است ابتدا ارسال کند درخواست قبل از پرواز ( OPTIONS درخواست) ، برای پرسیدن از سرور:

“سلام ، آیا می توانم این درخواست را از https://myfrontend.com؟

اگر سرور با هدرهای سمت راست پاسخ دهد:

Access-Control-Allow-Origin: https://myfrontend.com

سپس مرورگر می گوید: “خنک ، من مجاز به ادامه کار هستم.” و درخواست واقعی را ارسال می کند.

اگر هدر از دست رفته یا مطابقت ندارد ، مرورگر درخواست را مسدود می کند.

flow جریان درخواست پرواز

• مرورگر: ارسال می کند OPTIONS درخواست با جزئیات
• سرور: با عنوان های CORS پاسخ می دهد (در صورت مجاز بودن).
• مرورگر: اگر خوب است ، درخواست واقعی را ارسال می کند.

نمودار جریان بینایی

📦 نمونه درخواست HTTP Preflight

درخواست:

OPTIONS /data HTTP/1.1  
Origin: https://example-frontend.com  
Access-Control-Request-Method: POST  
Access-Control-Request-Headers: Content-Type

پاسخ:

HTTP/1.1 204 No Content  
Access-Control-Allow-Origin: https://example-frontend.com  
Access-Control-Allow-Methods: POST  
Access-Control-Allow-Headers: Content-Type

🔐 چرا CORS اهمیت دارد

تصور کنید که وارد سیستم خود شده اید بانک در یک برگه بدون CORS ، یک سایت مخرب در یک برگه دیگر می تواند به سکوت به داده های بانکی شما دسترسی پیدا کند فقط به این دلیل که وارد سیستم شده اید.

cors این کار را متوقف می کندبشر این تضمین می کند که فقط ریشه های قابل اعتماد می تواند برای منابع محافظت شده درخواست کند.

header مهم CORS توضیح داده شده است

CORS برای کنترل دسترسی از چندین هدست HTTP استفاده می کند. در اینجا مهمترین موارد وجود دارد:

1

این اساسی ترین عنوان CORS است. این مشخص می کند که منشأ مجاز به دسترسی به منبع است.

Access-Control-Allow-Origin: https://myfrontend.com

همچنین می توانید از کارت وحشی استفاده کنید تا هرگونه منشاء (برای داده های حساس به استفاده از API توصیه نمی شود) استفاده کنید:

Access-Control-Allow-Origin: *

2. روشهای کنترل-کنترل

مشخص می کند که روش های HTTP (دریافت ، پست و غیره) هنگام دسترسی به منبع مجاز است:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

3. کنترل دسترسی-سرپرست

نشان می دهد که از هدرهای HTTP می توان در طول درخواست واقعی استفاده کرد:

Access-Control-Allow-Headers: Content-Type, Authorization

4. اعتبار-کنترل-املایی

نشان می دهد که آیا مرورگر باید دارای اعتبار (مانند کوکی ها یا تأیید هویت HTTP) با درخواست باشد:

Access-Control-Allow-Credentials: true

5. Access-Control-Max-Age

مشخص می کند که چه مدت (در ثانیه) نتایج یک درخواست قبل از پرواز قابل ذخیره است:

Access-Control-Max-Age: 3600

🛠 cors in code (نمونه های سرور)

📘 با استفاده از express.js (هدرهای دستی)

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

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

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

✅ راه بهتر: از CORS Middleware استفاده کنید

npm install cors

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

⚠ خطاهای متداول CORS و نحوه اشکال زدایی

1. “دسترسی به واکشی در” X “از مبدا” Y “توسط سیاست CORS مسدود شده است”

این رایج ترین خطای CORS است و نشان می دهد که سرور در URL “X” شامل هدرهای CORS مناسب برای دسترسی به مبدا “Y” نیست.

راه حل: سرور را برای ارسال صحیح پیکربندی کنید Access-Control-Allow-Origin هدر

2. “زمینه هدر درخواست X توسط Access-Control-Headers مجاز نیست”

این خطا هنگامی رخ می دهد که درخواست شما شامل هدرهایی است که صریحاً توسط سرور مجاز نیستند.

راه حل: هدرهای مورد نیاز را به Access-Control-Allow-Headers هدر پاسخ روی سرور.

3. “روش X توسط روشهای دسترسی-کنترل-آلمات مجاز نیست”

روش HTTP که می خواهید از آن استفاده کنید ، توسط خط مشی CORS سرور مجاز نیست.

راه حل: روش را به Access-Control-Allow-Methods هدر پاسخ روی سرور.

4. “مقدار عنوان” دسترسی کنترل-کنترل-اورژین “نباید کارت وحشی باشد”*”هنگامی که حالت اعتبار درخواست” شامل “است”

این خطا هنگامی رخ می دهد که شما می خواهید اعتبار (کوکی ها و غیره) را به سرور ارسال کنید Access-Control-Allow-Origin: *بشر

راه حل: به جای استفاده از کارت وحشی ، منشأ دقیق را مشخص کنید و تنظیم کنید Access-Control-Allow-Credentials: trueبشر

🔍 اشکال زدایی مسائل CORS با ابزارهای مرورگر DEV

بیشتر مرورگرهای مدرن شامل ابزارهای توسعه دهنده هستند که می توانند به شما در تشخیص مسائل CORS کمک کنند:

1. ابزارهای توسعه دهنده را باز کنید: F12 یا راست را فشار دهید و “بازرسی” را انتخاب کنید
2. به برگه شبکه بروید: این همه درخواست های شبکه را نشان می دهد
3. به دنبال درخواست های ناموفق باشید: خطاهای CORS به رنگ قرمز ظاهر می شوند
4. درخواست های پیش از پرواز را بررسی کنید: به دنبال OPTIONS درخواست می کند که آیا آنها در حال بازگشت عنوان های صحیح هستند
5. کنسول را بررسی کنید: خطاهای CORS نیز در کنسول با پیام های دقیق ظاهر می شوند

مثال خطای CORS در کنسول:

دسترسی به واکشی در ‘https://api.example.com/data’ از مبدا> ‘https://myfrontend.com’ توسط خط مشی CORS مسدود شده است: NO> ‘Access-Control-allow-Origin’ header در مورد درخواست شده> منابع موجود است.

ملاحظات امنیتی

در حالی که CORS یک مکانیسم امنیتی است ، COR های نادرست می توانند منجر به آسیب پذیری های امنیتی شوند:

• ❌ Avoid Access-Control-Allow-Origin: * برای API های خصوصی
• 🔒 فقط به منشأ معتبر اجازه دهید
• ⚙ در مورد روش ها و هدرها مجاز باشید
• 🍪 استفاده کنید Access-Control-Allow-Credentials: true فقط در صورت لزوم

یادآوری کردن: CORS یک ویژگی امنیتی تقویت شده مرورگر است. نقاط پایانی API هنوز هم با استفاده از ابزارهایی مانند قابل دسترسی است curl یا Postmanبشر

موارد استفاده در دنیای واقعی

API و خدمات میکروس

در معماری های مدرن ، برنامه های جبهه اغلب نیاز به برقراری ارتباط با خدمات چند پس زمینه که در حوزه های مختلف برگزار می شود. CORS این خدمات را قادر می سازد تا منابع را به طور ایمن به اشتراک بگذارند.

ادغام های شخص ثالث

در هنگام ادغام با خدمات شخص ثالث (دروازه های پرداخت ، تجزیه و تحلیل و غیره) ، CORS به این خدمات خارجی اجازه می دهد تا در صورت لزوم به منابع از دامنه شما دسترسی پیدا کنند.

شبکه های تحویل محتوا (CDN)

هنگامی که دارایی های شما در CDN با دامنه های مختلف میزبانی می شود ، CORS به وب سایت اصلی شما اجازه می دهد تا با این منابع تعامل داشته باشد.

📚 نتیجه گیری

cors مانند یک است سیستم اجازه برای وببشر این امر مانع از این می شود که وب سایت های غیرمجاز با داده های شما از بین بروند ، در حالی که هنوز هم به سایت های قابل اعتماد اجازه می دهند تا با اطمینان ارتباط برقرار کنند.

فقط قیاس جعبه اسباب بازی را به خاطر بسپارید:

• شما وب سایت است ، جعبه اسباب بازی شمابشر
• داده های وب سایت دیگر این است جعبه اسباب بازی دوست شمابشر
• در مرورگر است ، مادرت، چه کسی اطمینان می دهد که با خیال راحت بازی می کنید.
• در سرور است ، پدر و مادر دوست شما، چه کسی تصمیم می گیرد که آیا شما مجاز به وام گرفتن اسباب بازی هستید.
• هدرهای CORS هستند لغزش اجازهبشر

درک cors است برای توسعه وب مدرن ضروری است، به خصوص هنگام کار با API و سیستم های توزیع شده.