การวิเคราะห์โดยย่อเกี่ยวกับวิธีใช้พร็อกซี Api ใน Angular

ในฐานะนักพัฒนาส่วนหน้า เรามักจะเชื่อมต่อกับส่วนหลัง อย่างไรก็ตาม เรามักจะประสบปัญหาข้ามโดเมนในระหว่างกระบวนการเชื่อมต่อ ดังนั้นเราจะแก้ไขได้อย่างไร

บทความนี้ใช้ angualr เพื่ออธิบายหัวข้อการเชื่อมต่อ api ของตัวแทน [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

ก่อนอื่น มาทำความเข้าใจว่าข้ามโดเมนคืออะไร

ข้ามโดเมน

: เมื่อ url ของสามส่วน任意一个ของ协议、域名（ip地址）、端口ของคำขอและหน้าปัจจุบันแตกต่างกัน แสดงว่าเป็นข้ามโดเมน

ยกตัวอย่างไซต์ของฉัน https://jimmyarea.com :

พร็อกซี

ในขณะนี้ เราสามารถใช้พร็อกซีเพื่อร่วมกันแก้ไขข้อบกพร่องที่อยู่ api ของสภาพแวดล้อมที่แตกต่างกัน

ขั้นแรก เราสร้างไฟล์ใหม่ proxy.conf.json ในไดเร็กทอรีรากของโปรเจ็กต์

เราใช้คำขออินเทอร์เฟซ https://jimmyarea.com/api/public/article?page=-1 เป็นตัวอย่าง:

{
  "/api": {
    "target": "https://jimmyarea.com/",
    "changeOrigin": จริง,
    "ปลอดภัย": เท็จ
    "pathRewrite": {
      "^/api": "/api"
    -
  -
}

target คือที่อยู่ของเอเจนต์ pathRewrite คือการเขียนคำนำหน้าของเอเจนต์ใหม่

หลังจากกรอกไฟล์พรอกซีเสร็จแล้ว คุณจะต้องเปิดใช้งานพรอกซี เราเพิ่มบรรทัดคำสั่งอีกหนึ่งบรรทัดใน package.json ซึ่งระบุว่าใช้สำหรับการดีบักในสภาพแวดล้อมการพัฒนา

"สคริปต์": {
  "dev": "ng ให้บริการ --proxy-config=proxy.conf.json",
}

ดำเนินการ npm run dev เพื่อเริ่มโปรเจ็กต์และนำเอเจนต์มา ทุกครั้งที่ไฟล์พร็อกซีมีการเปลี่ยนแปลง คุณต้องรีสตาร์ทบรรทัดคำสั่ง

เพื่อตรวจสอบว่า

เราได้สร้างบริการ article ใหม่แล้ว เนื้อหาของไฟล์ article.service.ts เป็นดังนี้:

นำเข้า { Injectable } จาก '@เชิงมุม/core' ;
// นำเข้าไคลเอ็นต์ http { HttpClient } จาก '@ เชิงมุม/common/http'

@ฉีด({
  ให้ไว้ใน: 'ราก'
-

ArticleService คลาสส่งออก {

  ตัวสร้าง (
    http ส่วนตัว: HttpClient
  -
   
  // รับรายการบทความ getArticleList() {
    กลับ this.http.get('/api/public/article', {
      // ประเภทการส่งคืน responseType: 'json',
      //ขอพารามิเตอร์พารามิเตอร์: {
        หน้า: -1
      -
    -
  -

}

สำหรับคำขอข้างต้น ที่อยู่บนเพจคือ http://localhost:4200/api/public/article?page=-1 ที่จริงแล้ว ที่อยู่ที่เข้าถึงคือ https://jimmyarea.com/api/public/article?page=-1 . เราสามารถตรวจสอบได้โดยการเรียกมันใน user-list.component.ts :

ngOnInit():void {
  this.articleService.getArticleList().สมัครสมาชิก({
    ถัดไป: (ข้อมูล: ใด ๆ ) => {
      console.log (ข้อมูล)
    -
    ข้อผิดพลาด: () => {}
  -
  -
}

หลังจากที่โปรแกรมทำงาน คุณจะเห็นคำขอเครือข่ายต่อไปนี้บนคอนโซล:

เยี่ยมมากพี่ชาย เราสามารถพร็อกซีที่อยู่ที่กำหนดโดยแบ็กเอนด์และแก้ไขข้อบกพร่องได้อย่างสมบูรณ์แบบ และพร็อกซีสามารถพร็อกซีได้มากกว่าหนึ่งที่อยู่ ผู้อ่านสามารถเขียนที่อยู่พร็อกซีหลายรายการเพื่อตรวจสอบได้~

[สิ้นสุด]