خطاهای به اشتراک گذاری منابع متقاطع (CORS) از جمله شایع ترین و ناامید کننده ترین موضوعات در توسعه وب مدرن هستند. این خطاها ناشی از سیاستهای امنیتی سختگیرانه مرورگر است که چگونگی درخواست منابع در یک صفحه وب از دامنه دیگر را محدود می کند. در حالی که این مکانیسم امنیتی برای محافظت از کاربران در برابر حملات مخرب ضروری است ، اما اغلب ارتباط بین برنامه های سمت مشتری و API های پس زمینه را پیچیده می کند. این راهنمای گسترش یافته به بررسی هشت نوع رایج خطای CORS ، علل اصلی آنها ، مشکلات دنیای واقعی که توسعه دهندگان با آن روبرو هستند و راه حل های بهترین عملکرد ، به ویژه در محیط های Node.js/Express.
1. هدر دسترسی-کنترل-ایل و ایلوژین از دست رفته
مشکل در دنیای واقعی
یک راه اندازی که جلوی خود را در Vercel و Backend در Heroku مستقر می کند ، می یابد که تمام تماس های API با خطاهای CORS شکست می خورد.
علت
این زمانی اتفاق می افتد که سرور شامل آن نباشد Access-Control-Allow-Origin هدر در پاسخ های خود ، باعث می شود مرورگر درخواست را مسدود کند.
راه حل
از cors بسته بندی را به صورت صریح یا دستی تنظیم کنید.
app.use(
cors({ origin: "http://client-app.com" })
);
2. خرابی درخواست PREFLIGHT (روش گزینه ها)
مشکل در دنیای واقعی
یک پلت فرم SaaS بارگذاری پرونده ها را ادغام می کند ، و باعث می شود درخواست ها با هدرهای سفارشی ایجاد شود. اینها بی صدا شکست می خورند.
علت
مرورگرها برای درخواست های HTTP غیر ساده ، درخواست گزینه (Preflight) را صادر می کنند. اگر سرور آن را به درستی اداره نکند ، مرورگر درخواست واقعی را مسدود می کند.
راه حل
صریحاً روش گزینه ها را در Express اداره کنید.
app.options("/upload", cors());
3. مقادیر منشأ چندگانه در هدر
مشکل در دنیای واقعی
یک برنامه از هر دو nginx و node.js cors استفاده می کند. کاربران مشکلات دسترسی متناقض را گزارش می کنند.
علت
چندین لایه ممکن است هدرهای کپی کپی را تزریق کند.
راه حل
اطمینان حاصل کنید که هدرهای CORS فقط یک بار تنظیم شده اند.
curl -I http://api.example.com/data
4. درخواست های معتبر با Origin Wildcard
مشکل در دنیای واقعی
یک برنامه داشبورد با استفاده از کوکی با withCredentials: true به دلیل پیکربندی مبدا Wildcard شکست می خورد.
علت
کارتن * با درخواست های معتبر مجاز نیست.
راه حل
منشأ دقیق را مشخص کرده و اعتبار را مجاز کنید.
cors({ origin: whitelist, credentials: true });
5. عدم تطابق منشأ/پروتکل
مشکل در دنیای واقعی
Frontend میزبان https:// اما پس زمینه اجرا می شود http://localhost، ایجاد عدم تطابق.
علت
مسابقه دقیق از جمله پروتکل ، دامنه و بندر مورد نیاز است.
راه حل
همه انواع را به لیست مبدا خود اضافه کنید:
const allowedOrigins = ["https://client-app.com", "http://localhost:3000"];
6. پیکربندی SSL/TLS نامعتبر است
مشکل در دنیای واقعی
API میزبان یک زیر دامنه با یک گواهینامه خود امضا شده ، تمام درخواست ها را شکست می دهد.
علت
مرورگرها پاسخ های نقاط پایانی را با گواهینامه های SSL نامعتبر یا غیرقابل اعتماد رد می کنند.
راه حل
از گواهینامه های معتبر CA استفاده کنید و اطمینان حاصل کنید که تنظیم HTTPS صحیح است.
7. روش های HTTP را مجازات نکرد
مشکل در دنیای واقعی
درخواست های با استفاده از Patch یا Delete توسط مرورگر مسدود می شود.
علت
سرور باید صریحاً اجازه این روشها را در Access-Control-Allow-Methodsبشر
راه حل
روشهای مجاز را به درستی پیکربندی کنید:
cors({ methods: ["GET", "POST", "PATCH", "DELETE"] });
8. هدرهای درخواست غیرمجاز
مشکل در دنیای واقعی
یک برنامه هدرهای سفارشی مانند ارسال می کند X-Token وت X-Client، که مسدود شده اند
علت
فقط هدرهای ذکر شده در درخواست های متقاطع مجاز هستند.
راه حل
آنها را اضافه کنید Access-Control-Allow-Headersبشر
cors({ allowedHeaders: ["Content-Type", "X-Token"] });
افکار نهایی
COR ها می توانند پیچیده باشند ، اما درک چگونگی اجرای مرورگر آن و نحوه پیکربندی صحیح سرور به جلوگیری از اختلال در توسعه و تولید کمک می کند. با دنبال کردن راه حل های ذکر شده در اینجا و آزمایش تنظیمات کامل ، توسعه دهندگان می توانند ادغام ایمن و یکپارچه بین خدمات جبهه و پس زمینه ایجاد کنند.
