برنامه نویسای سمت فرانت ممکنه زیاد با این صحنه مواجه بشن ، خطای معروف به CORS که باعث میشه درخواست از فرانت به سمت API نره و توی همون مرورگر خفه شه !
قبل از هر صحبتی باید مکانیسم CORS رو توضیح بدم . CORS یک مکانیسمی هست بر پایه هدر های HTTP که براساس اون مرورگر به ما این امکان رو میده که منابع مختلف رو ( از درخواست بهAPI گرفته تا گرفتن یک عکس از سرور ) از Origin های مختلف از سرور بگیریم یا نگیریم ! به زبون ساده تر میتونیم با استفاده از CORS دسترسی لود منابع رو روی Origin های مختلف مدیریت کنیم و به صورت پیشفرض این دسترسی ها از سمت مرورگر کاملا محدود شده هستند طوری که توی این حالت شما فقط زمانی میتونید از فرانت اند به بک اند درخواست بزنید که هردوی اونها روی یک Origin باشن ( Origin شامل پروتوکل ، دامنه و پورت میشه ) . با تغییر یکی از موارد Origin (پروتوکل ، دامنه و پورت ) یعنی اون Origin تغییر کرده و مرورگر اجازه ایجاد درخواست رو نمیده.
حالا روش کار CORS به چه صورت هست ؟ قبل از هر درخواست به سمت بک اند ، مرورگر یک درخواست با عنوان " preflight " از نوع Option به بک اند ارسال میکنه تا فعال بودن CORS روی بک اند ما رو با Origin بررسی کنه ، اگر این درخواست preflight با موفقیت انجام نشه مرورگر اجازه ایجاد درخواست اصلی (مثلا دریافت لیست کالا ها از بک اند ) رو به فرانت اند نمیده .
تقریبا همه ی زبان های برنامه نویسی تحت وب امکان مدیریت CORS رو دارن و با یه سرچ ساده میتونید تنظیمات CORS رو برای Origin های مختلف انجام بدید .
خیلی وقتها تمامی تنظیمات CORS کاملا درست انجام میشه ولی "روی بعضی از اکشن ها " هنوز خطای CORS دریافت میکنیم .
اتفاقی که میفته اینه که بخاطر وجود باگ توی پروژه ، درخواست preflight با موفقیت انجام نمیشه و مرورگر هم که اون درخواست Fail شده میبینه ، به جای اینکه خطای 500 یا Internal server Error نمایش بده خطای CORS به شما نشون میده .
