- بواسطة x32x01 ||
لو أي حد شغال web developer فأكيد شاف الـ Error ده
الخطأ ده معناه : إنك بتحاول تبعت طلب لسيرفر من موقعك، لكن السيرفر مش مديك إذن. والمتصفح عشان يحميك، بيوقف الطلب وبيقولك: "السيرفر مش سامح للموقع بتاعك إنه يتعامل معاه."
ببساطة كدة خلينا نقول السيرفر مش مفعّل إعدادات تخليه يقبل طلبات من موقعك، وعلشان كده المتصفح منع الطلب.
خلينا نقول ان الـ CORS : هو أسلوب يتبعه المتصفح لحماية المستخدمين لما المواقع تحاول تبعت طلبات لمصادر أو بيانات من سيرفرات بدومين مختلف عن اللي الموقع شغال عليه.
تخيل إنك فاتح موقع على ` youtube.com ` وعايز تجيب بيانات من سيرفر تاني شغال على ` api.youtube.com `. المتصفح مش هيسمح للموقع الأول إنه يبعت طلب للسيرفر التاني إلا لو السيرفر قال: "أيوة، الموقع ده مسموح له ياخد بيانات مني."
ده بيحصل لأن لو كل موقع بيسمح لنفسه يجيب بيانات من أي سيرفر بدون قيود، ممكن مواقع ضارة تستغل الموضوع ده وتاخد بياناتك بدون ما تحس. الـ CORS بيحط قواعد بتقول إن لازم السيرفر يحدد مين اللي مسموح له ياخد بيانات منه عشان المتصفح يسمح بالعملية دي.
يعني بشكل بسيط، الـ CORS هو الحارس اللي واقف بين الموقع بتاعك والسيرفرات اللي بتحاول تتعامل معاها، وبيسأل السيرفرات: "هل الموقع ده مسموح له ياخد بياناتك؟" لو الإجابة لأ، يبقى المتصفح يمنع الطلب.
خلينا بقا دلوقتي نتكلم في الحلول اللي بيعملها الباك إند عشان يضمن أمان الـ API ويحدد المواقع اللي مسموح لها توصل له. وكمان نعرف إزاي نطبق الإجراءات دي لو عندنا أكتر من موقع بيحتاجوا يتعاملوا مع نفس السيرفر:
في البداية، ممكن نستخدم طريقة الـ Whitelisting، اللي هي عبارة عن Array نحدد فيها المصادر اللي مسموح لها توصل للـ API بتاعنا بس. يعني، نحدد المواقع أو التطبيقات اللي نسمح لها بالدخول، وأي حد تاني يحاول يوصل للـ API مش هيكون مسموح له.
لو عدينا من الـ Whitelist بنجاح، يعني لو تأكدنا إن الموقع اللي عاوز يوصل هو فعلاً من المواقع المسموح بها، هنا نقدر نفتح الـ Access-Control-Allow-Origin ونخليها all`*` لأننا ضمنا إن الموقع اللي بيطلب البيانات هو من الـ Whitelist بتاعنا. وكمان نقدر نحدد (methods) اللي الموقع ده يقدر يوصل لها عن طريق Access-Control-Allow-Methods، وكمان نحدد الـ headers المسموح بها عن طريق Access-Control-Allow-Headers.
وهنتكلم عن حاجة أخيرة وهي Access-Control-Allow-Private-Network. لو الباك إند خلاص خلص شغله ورفعه على السيرفر، لكن الفرونت إند لسه شغال local ، فـ Access-Control-Allow-Private-Network الطبيعي بيكون `false`. ده معناه إن الفرونت إند مش هيقدر يوصل للـ API بتاعي. علشان نتجنب أي مشاكل بسبب CORS، لازم نخليها `true` عشان نسمح للفرونت إند اللي شغال local لسه يوصل للـ API بتاعي بدون مشاكل.
Code:
Access to fetch at 'http://localhost:3000/category.' from origin 'http://127.0.0.1:5500' has been blocked by CORS policyببساطة كدة خلينا نقول السيرفر مش مفعّل إعدادات تخليه يقبل طلبات من موقعك، وعلشان كده المتصفح منع الطلب.
خلينا نقول ان الـ CORS : هو أسلوب يتبعه المتصفح لحماية المستخدمين لما المواقع تحاول تبعت طلبات لمصادر أو بيانات من سيرفرات بدومين مختلف عن اللي الموقع شغال عليه.
تخيل إنك فاتح موقع على ` youtube.com ` وعايز تجيب بيانات من سيرفر تاني شغال على ` api.youtube.com `. المتصفح مش هيسمح للموقع الأول إنه يبعت طلب للسيرفر التاني إلا لو السيرفر قال: "أيوة، الموقع ده مسموح له ياخد بيانات مني."
ده بيحصل لأن لو كل موقع بيسمح لنفسه يجيب بيانات من أي سيرفر بدون قيود، ممكن مواقع ضارة تستغل الموضوع ده وتاخد بياناتك بدون ما تحس. الـ CORS بيحط قواعد بتقول إن لازم السيرفر يحدد مين اللي مسموح له ياخد بيانات منه عشان المتصفح يسمح بالعملية دي.
يعني بشكل بسيط، الـ CORS هو الحارس اللي واقف بين الموقع بتاعك والسيرفرات اللي بتحاول تتعامل معاها، وبيسأل السيرفرات: "هل الموقع ده مسموح له ياخد بياناتك؟" لو الإجابة لأ، يبقى المتصفح يمنع الطلب.
خلينا بقا دلوقتي نتكلم في الحلول اللي بيعملها الباك إند عشان يضمن أمان الـ API ويحدد المواقع اللي مسموح لها توصل له. وكمان نعرف إزاي نطبق الإجراءات دي لو عندنا أكتر من موقع بيحتاجوا يتعاملوا مع نفس السيرفر:
في البداية، ممكن نستخدم طريقة الـ Whitelisting، اللي هي عبارة عن Array نحدد فيها المصادر اللي مسموح لها توصل للـ API بتاعنا بس. يعني، نحدد المواقع أو التطبيقات اللي نسمح لها بالدخول، وأي حد تاني يحاول يوصل للـ API مش هيكون مسموح له.
لو عدينا من الـ Whitelist بنجاح، يعني لو تأكدنا إن الموقع اللي عاوز يوصل هو فعلاً من المواقع المسموح بها، هنا نقدر نفتح الـ Access-Control-Allow-Origin ونخليها all`*` لأننا ضمنا إن الموقع اللي بيطلب البيانات هو من الـ Whitelist بتاعنا. وكمان نقدر نحدد (methods) اللي الموقع ده يقدر يوصل لها عن طريق Access-Control-Allow-Methods، وكمان نحدد الـ headers المسموح بها عن طريق Access-Control-Allow-Headers.
وهنتكلم عن حاجة أخيرة وهي Access-Control-Allow-Private-Network. لو الباك إند خلاص خلص شغله ورفعه على السيرفر، لكن الفرونت إند لسه شغال local ، فـ Access-Control-Allow-Private-Network الطبيعي بيكون `false`. ده معناه إن الفرونت إند مش هيقدر يوصل للـ API بتاعي. علشان نتجنب أي مشاكل بسبب CORS، لازم نخليها `true` عشان نسمح للفرونت إند اللي شغال local لسه يوصل للـ API بتاعي بدون مشاكل.