
و انت فرونت إند ديفلوبر أكيد قابلتك مشكلة زي دي:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:7213/api/Users. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
ودي بتحصل لأنك بتحاول تجيب داتا من API موجودة على URL مختلف عن الـ Application بتاعك (مثلًا الـ Angular app بتاعك بيشتغل على localhost:4200 والـ API على localhost:7213)، فالمتصفح بيمنع ده كنوع من الأمان، وبيقولك لازم تاخد إذن (CORS header) من السيرفر اللي أنت بتحاول تتصل بيه.
المعتاد في الحالة دي أنك بتروح تكلم الباك إند يظبط لك الـ CORS ويضيف الهيدر ده:
Access-Control-Allow-Origin: http://localhost:4200
لكن المشكلة إن أوقات كتير ممكن الباك إند يتأخر عليك ، فممكن تقف شغلك وتعطل نفسك.
الحل الأسرع (لو بتستخدم Angular):
Angular بيوفرلك خاصية اسمها Proxy،
بيها تقدر تتخطى المشكلة دي مؤقتًا في مرحلة التطوير من غير ماتنتظر تعديل الباك إند.
① اعمل ملف باسم proxy.conf.json جنب ملف package.json
وتكتب الكود ده جواه:
{
“/api”: {
“target”: “https://localhost:7213”,
“secure”: false,
“changeOrigin”: true
}
}
② عدل طلب الـ API بتاعك في الكود عشان يبقى (Relative):
this.http.get(‘/api/Users’);
كدة صح بيتعامل مع البروكسى
ببساطة Angular هيستقبل طلبات /api/* وبدل ما يوديها مباشرة للباك إند (ويحصل خطأ CORS)، هيبعته للبروكسي الداخلي، والبروكسي هيكلم الـ API بالنيابة عنك ويجيبلك الرد، والمتصفح بتاعك مش هيحس إن في مشكلة.
خلى بالك الكلام ده فى ال development بس لكن فى البرودكشن لازم تتعدل من الباك