CORS یا (Cross-Origin Resource Sharing) یک ویژگی امنیتی در مرورگرها است که اجازه نمی‌دهد یک وب‌سایت به اطلاعات سایت‌های دیگر بدون اجازه، دسترسی پیدا کند.
در حالی که این مورد یک ویژگی امنیتی مهم است؛ اما اغلب در پروژه های بزرگ و حرفه ای با آن مواجه خواهید شد.
در این آموزش، برخی از رایج‌ترین خطاهای CORS که توسعه‌دهندگان با آن‌ها مواجه می‌شوند را بررسی کرده و راهنمایی‌هایی برای رفع آن‌ها ارائه شده است. در آغاز تصویری از Same-origin و Cross-origin ارائه شده که می تواند به درک بهتر آموزش کمک کند.
.webp)
تصویر(1)
با توجه به تصویر 1؛ در این آموزش از یک بک‌اند Node.js و فرانت‌اند React استفاده شده است.
خطای 1: نبود هدر "Access-Control-Allow-Origin"
ممکن است هنگام ارسال درخواست از فرانت‌اند React به بک‌اند Node.js با خطاهای CORS مواجه شوید. به‌طور پیش‌فرض، مرورگر این درخواست‌ها را به دلیل سیاست same-origin مسدود می‌کند. برای اجازه دادن به درخواست‌های cross-origin، باید سرور Node.js خود را طوری پیکربندی کنید که هدرهای CORS مناسب را در پاسخ‌ها قرار دهد.
برای رفع خطای عدم وجود هدر "Access-Control-Allow-Origin"، لازم است این هدر را به پاسخ سرور Node.js خود اضافه کنید.
در ادامه نحوه انجام این کار با استفاده از پکیج cors در یک برنامه Node.js/Express آورده شده است:
نصب پکیج cors با npm:
npm install cors
در فایل سرور Node.js خود مطابق تصویر2، پکیج cors را ایمپورت کرده و از آن به‌عنوان یک middleware استفاده کنید. این کار به طور خودکار هدرهای CORS لازم را به درخواست‌ها اضافه می‌کند.
.webp)
تصویر(2)
اگر از middleware پکیج cors استفاده کنید، سرور شما به‌صورت خودکار هدر "Access-Control-Allow-Origin" را با مقدار "*" (اجازه دادن به درخواست از هر دامنه‌ای) در پاسخ‌ها قرار می‌دهد. اگر می‌خواهید درخواست‌ها را فقط به یک دامنه خاص محدود نمایید، می‌توانید یک شیء تنظیمات به middleware cors ارسال کنید.
در این شیء، مطابق تصویر3 دامنه‌های مجاز مشخص خواهد شد.
.webp)
تصویر(3)
در این مثال، سرور فقط درخواست‌ها را از دامنه https://example.com می‌پذیرد. اگر نیاز دارید چند دامنه را مجاز کنید، می‌توانید همانند تصویر4 از یک تابع برای گزینه origin استفاده نمایید:
.webp)
تصویر(4)
علاوه بر این، ممکن است نیاز باشد هدرهای Access-Control-Allow-Methods و Access-Control-Allow-Headers را نیز تنظیم کنید تا مانند تصویر5 با نیازهای خاص برنامه شما هماهنگ باشد.
تصویر(5)
خطای 2: نبود هدر “Access-Control-Allow-Methods”
هنگام انجام درخواست‌های cross-origin از یک وب اپلیکیشن، مرورگر ابتدا یک درخواست (preflight با استفاده از متد HTTP OPTIONS) به سرور ارسال می‌کند تا بررسی کند که آیا دسترسی به منبع مورد نظر ایمن است یا خیر. در پاسخ به این درخواست preflight، سرور باید هدرهای CORS مناسب را ارسال کند تا نشان دهد کدام متدهای HTTP برای منبع مورد نظر مجاز هستند؛ یکی از این هدرها، “Access-Control-Allow-Methods” است که متدهای مجاز HTTP را مشخص می‌کند.
اگر هدر “Access-Control-Allow-Methods” وجود نداشته باشد یا شامل متد HTTP مورد استفاده در درخواست نباشد، مرورگر درخواست را مسدود کرده و خطای “Access-Control-Allow-Methods header missing” نمایش داده می‌شود.
برای رفع این خطا، باید هدر “Access-Control-Allow-Methods” را به پاسخ سرور اضافه کنید و مقدار آن را مانند تصویر6 برابر با متدهای HTTP مجاز قرار دهید.
.webp)
تصویر(6)
3. رفع خطای Preflight request failed
هنگام انجام درخواست‌های cross-origin از یک وب اپلیکیشن، مرورگر ابتدا یک درخواست (preflight با استفاده از متد HTTP OPTIONS) به سرور ارسال می‌کند تا بررسی کند که آیا دسترسی به منبع مورد نظر ایمن است یا خیر.
در پاسخ به این درخواست preflight، سرور باید هدرهای CORS مناسب را ارسال کند تا نشان دهد کدام متدهای HTTP برای منبع مورد نظر مجاز هستند. یکی از این هدرها، “Access-Control-Allow-Methods” است که متدهای مجاز HTTP را مشخص می‌کند.
اگر سرور با هدرهای مناسب CORS پاسخ ندهد یا هدرها نادرست باشند، مرورگر درخواست را مسدود کرده و شما خطای "Preflight request failed" را مشاهده خواهید کرد.
برای رفع این خطا، اطمینان حاصل کنید که سرور شما به درخواست‌های preflight با هدرهای مناسب پاسخ می‌دهد.
در ادامه چند مرحله بیان شده است که می‌توانید برای رفع خطا انجام دهید:
1. بررسی لاگ‌های سرور
بررسی کنید که آیا در لاگ‌های سرور خطاها یا هشدارهای مرتبط با CORS وجود دارد یا خیر. اطمینان حاصل نمایید که تنظیمات CORS به درستی اعمال شده‌اند.
2. بررسی تب Network مرورگر
در کنسول مرورگر (فشردن دکمه F12 کیبورد)، تب Network را باز کنید و جزئیات درخواست (preflight) و پاسخ را بررسی نمایید. شما باید به دنبال هدرهای CORS و هرگونه خطای مرتبط باشید.
3. تنظیم هدرهای پاسخ سرور
اطمینان حاصل کنید که سرور هدرهای زیر را در پاسخ به درخواست ارسال می نماید:
• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Header
• Access-Control-Allow-Credentials
در تصویر7 یک مثال از نحوه فعالسازی CORS در یک برنامه Node.js/Express آورده شده است:
تصویر(7)
در این مثال، از پکیج cors به‌عنوان middleware استفاده شده است تا درخواست‌های cross-origin برای تمام مسیرهای برنامه مجاز شوند. سپس، درخواست GET در مسیر api/data/ پردازش می‌شود و داده‌هایی به عنوان پاسخ بازگردانده می‌شوند.
با فعال کردن CORS در سرور خود و اطمینان از اینکه هدرهای مناسب CORS در پاسخ به درخواست preflight قرار داده شده اند، می‌توانید از خطای "Preflight request failed" جلوگیری کرده و به درخواست‌های cross-origin اجازه دهید به سرور شما دسترسی پیدا کنند.
4. رفع خطای Credentials not allowed
اگر درخواست‌های cross-origin شما نیاز به اعتبارنامه دارند (مانند کوکی‌ها یا احراز هویت HTTP)، مرورگر ابتدا یک درخواست preflight با متد HTTP OPTIONS ارسال می‌کند؛ اگر سرور با هدرهای مناسب برای اجازه استفاده از اعتبارنامه‌ها پاسخ ندهد، مرورگر درخواست را مسدود کرده و خطای “Credentials not allowed” نمایش می‌دهد.
برای رفع این خطا، باید اطمینان حاصل کنید که سرور شما با هدرهای مناسب CORS که اجازه اعتبارنامه‌ها را می‌دهند، به درخواست preflight پاسخ می‌دهد.
در ادامه چند مرحله برای رفع این خطا آورده شده است:
1. بررسی لاگ‌های سرور
بررسی کنید که آیا در لاگ‌های سرور خطاها یا هشدارهای مرتبط با CORS وجود دارد یا خیر. اطمینان حاصل کنید که تنظیمات مربوط به اعتبارنامه‌ها به‌درستی پیکربندی شده‌اند.
2. بررسی تب Network مرورگر
در کنسول مرورگر، جزئیات درخواست (preflight) و پاسخ سرور را بررسی کنید. شما باید به دنبال هدرهای CORS مرتبط با اعتبارنامه‌ها باشید.
3. تنظیم هدرهای پاسخ سرور
مطمئن شوید که سرور هدرهای زیر را ارسال می‌کند:
• Access-Control-Allow-Origin
دامنه‌ای که اجازه دسترسی دارد (نمی‌توان مقدار* را در اینجا استفاده کرد)
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Allow-Credentials
مقدار true برای اجازه استفاده از کوکی‌ها یا اعتبارنامه‌ها
در تصویر8 یک مثال از نحوه فعال کردن CORS با اعتبارنامه‌ها در یک برنامه Node.js/Express آورده شده است:
.webp)
تصویر(8)
در این مثال، از پکیج cors با تنظیم گزینه credentials: true استفاده شده است تا درخواست‌های cross-origin همراه با اعتبارنامه‌ها (مانند کوکی‌ها و هدرهای احراز هویت) برای تمام مسیرهای برنامه مجاز شوند. سپس درخواست GET در مسیر api/data/ پردازش شده و داده‌هایی بازگردانده می‌شوند.
با فعال کردن CORS با اعتبارنامه‌ها در سرور خود و اطمینان از اینکه هدرهای مناسب CORS که اجازه اعتبارنامه‌ها را می‌دهند در پاسخ به درخواست preflight گنجانده شده‌اند، می‌توانید از خطای "Credentials not allowed" جلوگیری کرده و به درخواست‌های cross-origin با اعتبارنامه‌ها اجازه دهید به سرور شما دسترسی پیدا کنند.
پرینت این مقاله
