أفضل الطرق للاتصال بالخادم باستخدام Angular CLI

يعرف كل من استخدم Angular CLI أنها أداة قوية يمكنها نقل وظيفة تطوير الواجهة الأمامية إلى مستوى مختلف تمامًا. يحتوي على جميع المهام الشائعة مثل إعادة التحميل المباشر ، والنسخ المطبوع على الحروف ، والتصغير ، والمزيد. وكلها مهيأة مسبقًا وجاهزة للاستخدام بأمر واحد بسيط:

ng build, ng serve, ng test.

ولكن هناك مهمة واحدة (وهي مهمة جدًا) يجب تكوينها بمجرد أن يصبح التطبيق جاهزًا لبدء عرض بعض البيانات من الخادم ...

نعم ، بغض النظر عن مدى روعة إطار العمل Angular ومدى سرعة وأداء مكوناته - في النهاية الغرض من SPA (تطبيق صفحة واحدة) هو التفاعل مع الخادم من خلال طلبات HTTP.

وإليك العقبة الأولى التي تظهر قبل كل مبتدئ Angular CLI: يعمل مشروع Angular على الخادم الخاص به (والذي يعمل افتراضيًا على // localhost: 4200). لذلك ، فإن الطلبات إلى خادم واجهة برمجة التطبيقات هي عبر نطاقات ، وكما تعلم ، فإن أمان متصفح الويب لا يسمح بإجراء طلبات عبر المجال.

النهج رقم 1: الوكيل

بالطبع ، توقع الأشخاص في Angular CLI هذه المشكلة وقاموا حتى ببناء خيار خاص لتشغيل مشروع Angular باستخدام تكوين وكيل:

ng serve —-proxy-config proxy.conf.json

ما هو الوكيل ، قد تسأل؟ حسنًا ، لا تسمح لك المتصفحات بإجراء طلبات عبر المجال ، لكن الخوادم تسمح بذلك. يعني استخدام خيار الوكيل أنك تخبر خادم Angular CLI بمعالجة الطلب المرسل من Angular وإعادة إرساله من خادم التطوير. بهذه الطريقة ، الشخص الذي "يتحدث" مع خادم API هو خادم Angular CLI.

يتطلب تكوين الوكيل proxy.conf.jsonملف لإضافته إلى المشروع. هذا ملف JSON مع بعض الإعدادات الأساسية. فيما يلي مثال على محتويات proxy.conf :

{ "/api/*": { "target": "//localhost:3000", "secure": false, "pathRewrite": {"^/api" : ""} }}

يعني هذا الرمز أن جميع الطلبات التي تبدأ بـ api / سيتم إرسالها إلى // localhost: 3000(وهو عنوان خادم API)

النهج رقم 2: CORS

لا يسمح لك أمان المستعرض بإجراء طلبات عبر المجال ما لم يكن Control-Allow-Originالعنوان موجودًا عند استجابة الخادم. بمجرد تكوين خادم API الخاص بك على "الإجابة" باستخدام هذا الرأس ، يمكنك جلب البيانات ونشرها من مجال مختلف.

تسمى هذه التقنية مشاركة الموارد عبر الأصول أو CORS. يمكن تهيئة معظم الخوادم وأطر الخوادم الشائعة مثل Node.js 'Express أو Java Spring Boot بسهولة لإتاحة CORS.

فيما يلي بعض الأمثلة على التعليمات البرمجية التي تعين خادم Node.js Express لاستخدام CORS:

const cors = require('cors'); //<-- required installing 'cors' (npm i cors --save)const express = require('express');const app = express();app.use(cors()); //<-- That`s it, no more code needed!

لاحظ أنه عند استخدام CORS ، قبل إرسال كل طلب من طلبات HTTP ، فإنه سيتبع بعد طلب OPTIONS (على نفس عنوان URL) الذي يتحقق لمعرفة ما إذا كان بروتوكول CORS مفهومًا أم لا. قد يؤثر هذا "الطلب المزدوج" على أدائك.

نهج الإنتاج

حسنًا ، مشروع Angular الخاص بك "يتحدث" بسلاسة مع الخادم ، ويحصل على البيانات ويرسلها في بيئة المطور. ولكن حان وقت النشر أخيرًا ، وتحتاج إلى تطبيق Angular الجميل والرائع ليتم استضافته في مكان ما (بعيدًا عن Papa Angular CLI). لذا مرة أخرى ، تواجه نفس المشكلة: كيفية جعله يتصل بالخادم.

يوجد الآن اختلاف كبير: في بيئة الإنتاج (بعد تشغيل ng buildالأمر) ، لا يعد تطبيق Angular أكثر من مجموعة من ملفات HTML و JavaScript.

في الواقع ، يعد القرار المتعلق بكيفية استضافة التطبيق على خادم الإنتاج قرارًا معماريًا ، والهندسة المعمارية أبعد من نطاق هذه المقالة. ولكن هناك خيار واحد أوصي بأن تفكر فيه.

خدمة الملفات الثابتة من خادم API

نعم ، يمكنك استضافة مشروع Angular الخاص بك (بمجرد أن يحتوي على ملفات HTML و JavaScript فقط) على نفس الخادم حيث يتم تقديم البيانات (APIs).

تتمثل إحدى مزايا هذه الإستراتيجية في أنك الآن لا تواجه أي مشكلات "عبر المجال" ، نظرًا لأن العميل وواجهة برمجة التطبيقات موجودان بالفعل على نفس الخادم!

بالطبع ، يتطلب هذا النهج تكوين خادم API بشكل صحيح.

هذا هو الكود الذي يعرض الدليل "العام" حيث يمكن استضافة ملفات Angular عند استخدام خادم Node Express:

app.use(express.static('public')); //<-- public directory that contains all angular files

لاحظ أنه في هذه الحالة ، ستختلف الطريقة التي يصل بها تطبيقك إلى واجهة برمجة التطبيقات في بيئة التطوير عن طريقة وصول واجهة برمجة التطبيقات إليها أثناء الإنتاج. وبالتالي قد تحتاج إلى استخدام عناوين URL مختلفة لـ HTTP في بيئات مختلفة (مثل api / users / 1 في dev والمستخدمون / 1 في الإنتاج). يمكنك استخدام خيار بيئة Angular CLI لتحقيق ذلك:

// users.service.ts
const URL = 'users';return this.http.get(`${environment.baseUrl}/${URL}`);...
// example of environment.ts file:export const environment = { production: false, baseUrl: 'api',//<-- 'API/' prefix needed for proxy configuration };
// example of environment.prod.ts file:export const environment = { production: true, baseUrl: '', //<-- no 'API/' prefix needed};

استنتاج

Angular CLI هي بلا شك أداة قوية جدًا وقوية. يجعل حياتنا كمطورين للواجهة الأمامية أسهل من نواح كثيرة. ولكنه يتطلب منك أيضًا اتخاذ قرار معماري بشأن الاتصال بخادم واجهة برمجة التطبيقات. لذلك ، تحتاج إلى فهم واضح للطرق المختلفة التي يمكن من خلالها إنشاء اتصال بين العميل والخادم.

تسرد هذه المقالة طريقتين للتعامل مع هذه المشكلة في بيئة المطور وأيضًا توصية واحدة حول هندسة الإنتاج.

حاول اللعب بمجموعات متنوعة ومعرفة أيها أكثر ملاءمة لك ولفريقك.

استمتع واسمحوا لي أن أعرف كيف ستسير الامور!