تواصل تطبيقات Angular و Express عبر منافذ مختلفة

عندما يتم تشغيل الواجهة الأمامية والخلفية على منافذ مختلفة، تحتاج إلى وسيلة للاتصال بينهما عبر الشبكة. في هذه الحالة، يمكنك استخدام تقنية تسمى “Cross-Origin Resource Sharing” (CORS)، وهي آلية تسمح لموارد محددة في موقع الويب بطلب الموارد من مصادر أخرى خارج نطاق الموقع.

عندما تقوم بتشغيل تطبيق الواجهة الأمامية (Angular) على منفذ 4200، وتشغيل الخادم الخلفي (Express) على منفذ 8080، يجب عليك أولاً تهيئة الخادم الخلفي للسماح بطلبات CORS من الواجهة الأمامية.

في Express، يمكنك استخدام حزمة cors لتكوين الخادم لقبول طلبات CORS. يمكنك تثبيتها باستخدام npm كالتالي:

Copy code
npm install cors

ثم، يمكنك استخدامها في تطبيق Express الخاص بك كما يلي:

javascriptCopy code
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

// تحديد المسار والوظيفة المرتبطة به للسماح بالوصول من الواجهة الأمامية
app.get('/hello', function(req, res) {
  res.send("Hello!");
});

// استمرار تشغيل الخادم على المنفذ 8080
app.listen(8080, function() {
  console.log('Server is running on port 8080');
});

بهذه الطريقة، سيقبل الخادم الخلفي الطلبات الصادرة من المنفذ 4200 الذي يعمل عليه الواجهة الأمامية.

في الواجهة الأمامية (Angular)، يمكنك الآن بسهولة إجراء طلب إلى الخادم الخلفي باستخدام HttpClient module. على سبيل المثال، يمكنك القيام بذلك في أحد مكونات Angular الخاصة بك كما يلي:

typescriptCopy code
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('http://localhost:8080/hello').subscribe((response: string) => {
      console.log(response); // سيتم طباعة "Hello!" في وحدة التحكم بالمتصفح
    });
  }

}

هكذا، باستخدام HttpClient module في Angular، يمكنك إجراء طلب إلى الخادم الخلفي والحصول على البيانات المطلوبة. وباستخدام تكوين CORS في الخادم الخلفي، ستتمكن من تجنب الأخطاء التي تظهر عند محاولة إرسال طلب من المنفذ 4200 إلى المنفذ 8080 بدون تهيئة CORS المناسبة.

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

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

إليك بعض النقاط الهامة لتوخيها عند العمل مع تطبيقات Angular و Express على منافذ مختلفة:

1. تكوين CORS في الخادم الخلفي: كما تم شرحه سابقًا، يجب عليك تكوين الخادم الخلفي للسماح بطلبات CORS من المنفذ الذي يعمل عليه الواجهة الأمامية. هذا يضمن أن الطلبات يمكن أن تتم بنجاح عبر المنافذ.

2. استخدام HttpClient module في Angular: يتيح لك HttpClient module في Angular إرسال طلبات HTTP بسهولة إلى الخادم الخلفي. يمكنك استخدامه في مكونات Angular الخاصة بك لجلب البيانات من الخادم الخلفي أو إرسال البيانات إليه.

3. إدارة الاتصال بين الطلبات والاستجابات: يجب عليك أن تكون حذرًا عند إدارة عمليات الاتصال بين الواجهة الأمامية والخلفية. يمكن استخدام مكتبات مثل RxJS في Angular لإدارة الطلبات والاستجابات بطريقة فعالة وسلسة.

4. التحقق من الأمان والصلاحيات: تأكد دائمًا من تطبيق التحقق من الصلاحيات والأمان في الجزء الخلفي من تطبيقك. يجب أن تتحقق من أن المستخدمين لهم الصلاحيات اللازمة للوصول إلى الموارد المطلوبة.

5. اختبار متقدم: قم بإجراء اختبارات متقدمة لتأكيد أن الاتصال بين الواجهة الأمامية والخلفية يتم بنجاح عبر المنافذ المختلفة. يجب أن تشمل اختباراتك اختبارات وحدة واختبارات اندماج لضمان عمل التطبيق بشكل صحيح.

من خلال مراعاة هذه النقاط وتطبيقها بعناية، يمكنك بناء تطبيقات ويب فعالة وآمنة تستخدم Angular للجزء الأمامي و Express للجزء الخلفي على منافذ مختلفة.