CORS به زبان ساده#
مرورگرها به‌طور پیش‌فرض اجازه نمی‌دهند کد جاوااسکریپتِ یک سایت، پاسخِ درخواستی را که به دامنه‌ی دیگری فرستاده بخواند. به این قاعده «سیاست هم‌مبدأ» می‌گویند و هدفش این است که یک سایت مخرب نتواند با حساب شما از سایت دیگری اطلاعات بیرون بکشد. CORS راهی رسمی است که سرور مقصد با آن بگوید: «به این مبدأها اعتماد دارم، پاسخ را به آن‌ها نشان بده.»
یک مثال روزمره#
فرض کنید فرانت‌اند شما روی shop.example است و API روی api.example. وقتی صفحه با fetch از API داده می‌خواهد، مرورگر نگاه میکند که پاسخ هدری مثل Access-Control-Allow-Origin: https://shop.example دارد یا نه. اگر نداشته باشد، درخواست شاید به سرور برسد، اما مرورگر پاسخ را به کد شما نمی‌دهد و در کنسول خطای CORS می‌بینید.
برای برخی درخواست‌ها (مثلاً با متد PUT یا هدرهای سفارشی) مرورگر اول یک درخواست OPTIONS به نام preflight می‌فرستد تا اجازه را بپرسد.
کجا با آن روبه‌رو می‌شوید#
- اتصال فرانت‌اند به API روی دامنه یا پورت دیگر، حتی در محیط لوکال
- استفاده از فونت یا API یک سرویس بیرونی
- ساخت افزونه‌ای که از سایت دیگری داده می‌خواند
اشتباه رایج#
خیلی‌ها برای خلاص شدن از خطا، * را برای همه‌ی مبدأها باز می‌کنند. برای داده‌ی عمومی اشکالی ندارد، اما برای APIای که با کوکی یا اطلاعات کاربر کار میکند خطرناک است. درست‌تر این است که فقط دامنه‌های خودتان را مجاز کنید. یادتان باشد CORS را سرور تنظیم میکند، نه کد فرانت‌اند؛ و فقط مرورگر آن را اجرا میکند، پس جایگزین احراز هویت نیست.