learn

رفع خطای CORS؛ تنظیم درست Access-Control-Allow-Origin

راهنمای تشخیص خطای دسترسی بین مبدأها برای فونت و API، با اصلاح هدفمند پاسخ سرور.

رفع خطای CORS با پیدا کردن درخواست ناموفق شروع می‌شود. مبدأ یا Origin ترکیب پروتکل، نام میزبان و پورت است؛ بنابراین دو زیردامنه یا دو پورت متفاوت می‌توانند مبدأ متفاوت داشته باشند. این موضوع فقط به فونت، CSS و JavaScript محدود نیست و در درخواست‌های API هم دیده می‌شود.

برای رفع خطای CORS ابتدا چه چیزی را ببینیم؟

ابزار توسعهٔ مرورگر را باز کنید، عملیات ناموفق را تکرار کنید و پیام Console را همراه درخواست مربوط در Network بخوانید. URL، وضعیت پاسخ و هدرهای درخواست و پاسخ را ثبت کنید. پیام کلی JavaScript به‌تنهایی علت دقیق را نشان نمی‌دهد؛ راهنمای خطاهای CORS انواع پیام مرورگر را تفکیک می‌کند.

نمونهٔ عملی: صفحه باز می‌شود ولی فونت از زیردامنهٔ فایل‌ها بارگیری نمی‌شود. در این حالت باید پاسخ همان فایل فونت را بررسی کرد، نه اینکه همهٔ تنظیمات وردپرس را عوض کرد. اگر پاسخ فایل 404 یا صفحهٔ ورود باشد، ابتدا علت آن پاسخ را پیدا کنید.

نمونه پیام مرورگر هنگام مسدودشدن دسترسی به فونت از مبدأ دیگر

هدر باید در پاسخ منبع قرار بگیرد

Access-Control-Allow-Origin را سرورِ ارائه‌دهندهٔ منبع می‌فرستد. افزودن آن به هدر درخواست در کد مرورگر، مجوز ایجاد نمی‌کند. اگر منبع متعلق به سرویس دیگری است، باید از API و مبدأهای مجاز همان سرویس استفاده کنید یا از مالک آن اصلاح بخواهید.

برای یک فونت عمومی روی Apache، نمونهٔ زیر فقط اجازهٔ مبدأ مشخص‌شده را نشان می‌دهد. آن را در محدودهٔ همان پوشهٔ فونت‌ها و تنها وقتی mod_headers و مجوز استفاده از دستور فراهم است به کار ببرید. دامنهٔ نمونه باید با مبدأ واقعی جایگزین شود.

<FilesMatch "\.woff2?$">
    Header set Access-Control-Allow-Origin "https://www.example.com"
</FilesMatch>

این نمونه برای همهٔ APIها یا همهٔ وب‌سرورها نیست. مستند mod_headers دامنهٔ اثر و ترتیب اعمال هدرها را توضیح می‌دهد. اگر برنامه یا CDN همین هدر را تولید می‌کند، یک مسئول مشخص برای آن انتخاب کنید تا پاسخ دارای هدر تکراری نشود.

درخواست OPTIONS، کوکی و کش

برخی درخواست‌ها ابتدا preflight با روش OPTIONS می‌فرستند. پاسخ باید روش و هدرهای واقعاً مجاز را اعلام کند؛ موفق‌بودن درخواست سادهٔ GET این مرحله را اثبات نمی‌کند. برای درخواست دارای اعتبارنامه، مقدار ستاره در Allow-Origin مجاز نیست و مبدأ صریح لازم است.

اگر پاسخ بر اساس فهرست مبدأهای مجاز تغییر می‌کند، کش باید با Vary: Origin از این تفاوت آگاه شود. بازتاب هر Origin بدون اعتبارسنجی، فهرست مجاز محسوب نمی‌شود. جزئیات این رفتار در مستند CORS آمده است.

چه کارهایی مشکل سایت را حل نمی‌کنند؟

از بازدیدکننده نخواهید افزونهٔ غیرفعال‌کنندهٔ محدودیت مرورگر نصب کند. این کار تنظیم سرور را درست نمی‌کند. حالت no-cors نیز پاسخ قابل‌خواندن دلخواه برای JavaScript نمی‌سازد. همچنین CORS جای احراز هویت و مجوز دسترسی برنامه نیست.

پس از اصلاح، همان عملیات را با مرورگر معمولی و بدون افزونهٔ دورزننده تکرار کنید. پاسخ کش‌شده و هدر تکراری را بررسی کنید. اگر درخواست هنوز خطا دارد، متن دقیق پیام جدید تعیین‌کننده است؛ خطای TLS یا محتوای HTTP داخل صفحهٔ HTTPS را با تغییر بی‌هدف CORS درمان نکنید.

مطالعهٔ مرتبط

بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.

مطالب مرتبط

ارسال نظر

فهرست مطالب