تحليل موجز لكيفية استخدام وكيل Api في Angular

باعتبارنا مطورًا للواجهة الأمامية، فإننا نتعامل بشكل متكرر مع الواجهة الخلفية، ومع ذلك، نواجه دائمًا مشكلات عبر النطاقات أثناء عملية الالتحام، فكيف يمكننا حلها؟

تستخدم هذه المقالة angualr لشرح موضوع إرساء واجهة برمجة api الوكيل. [برامج تعليمية ذات صلة موصى بها: "Angular Tutorial"]

أولاً، دعونا نفهم ما هو المجال المتقاطع.

للنطاقات المشتركة

: عندما يكون url任意一个الأجزاء الثلاثة协议、域名（ip地址）、端口الطلب مختلفًا عن الصفحة الحالية، فإنه يكون عبر النطاقات .

خذ موقعي https://jimmyarea.com كمثال:

الوكيل

في هذا الوقت، يمكننا استخدام الوكيل لتصحيح أخطاء عناوين api للبيئات المختلفة محليًا.

أولاً، نقوم بإنشاء ملف proxy.conf.json جديد في الدليل الجذر للمشروع.

نأخذ طلب الواجهة https://jimmyarea.com/api/public/article?page=-1 كمثال:

{
  "/ واجهة برمجة التطبيقات": {
    "الهدف": "https://jimmyarea.com/"،
    "changeOrigin": صحيح،
    "آمن": كاذب،
    "إعادة كتابة المسار": {
      "^/api": "/api"
    }
  }
}

target هو عنوان الوكيل، pathRewrite هو إعادة كتابة بادئة الوكيل.

بعد الانتهاء من ملف الوكيل، تحتاج إلى تمكين الوكيل. نضيف سطر أوامر آخر إلى package.json ، للإشارة إلى أنه يُستخدم لتصحيح الأخطاء في بيئة التطوير.

"السيناريو": {
  "dev": "خدمة ng --proxy-config=proxy.conf.json",
}

قم بتنفيذ npm run dev لبدء المشروع وإحضار الوكيل. في كل مرة يتغير فيها ملف الوكيل، تحتاج إلى إعادة تشغيل سطر الأوامر

للتحقق من أننا

أنشأنا خدمة article جديدة. محتوى ملف article.service.ts هو كما يلي:

import { Injectable } from '@angular/core'. ;
// استيراد عميل http {HttpClient} من '@angular/common/http'

@الحقن({
  المقدمة في: 'الجذر'
})

فئة التصدير خدمة المادة {

  منشئ(
    http الخاص: HttpClient
  ) { }
   
  // احصل على قائمة المقالات getArticleList() {
    قم بإرجاع هذا.http.get('/api/public/article', {
      // نوع الإرجاع ResponseType: 'json'،
      // طلب معلمات المعلمات: {
        الصفحة: -1
      }
    })
  }

}

بالنسبة للطلب أعلاه، العنوان الموجود على الصفحة هو http://localhost:4200/api/public/article?page=-1 في الواقع، العنوان الذي تم الوصول إليه هو https://jimmyarea.com/api/public/article?page=-1 . https://jimmyarea.com/api/public/article?page=-1 . يمكننا التحقق من ذلك عن طريق الاتصال به في user-list.component.ts :

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    التالي: (البيانات: أي) => {
      console.log(البيانات)
    },
    خطأ: () => {}
  })
  // ...
}

بعد تشغيل البرنامج، يمكنك رؤية طلبات الشبكة التالية على وحدة التحكم:

عمل جيد يا أخي. يمكننا توكيل العنوان الذي قدمته الواجهة الخلفية وتصحيح أخطائه بشكل مثالي، ويمكن للوكيل توكيل أكثر من عنوان واحد. يمكن للقراء كتابة عناوين بروكسي متعددة للتحقق ~

[النهاية]