Analisis singkat tentang cara menggunakan proxy Api di Angular

Sebagai pengembang front-end, kami sering berinteraksi dengan back-end. Namun, kami selalu menemui masalah lintas domain selama proses docking, lalu bagaimana cara mengatasinya?

Artikel ini menggunakan angualr untuk menjelaskan topik docking agen api . [Tutorial terkait yang direkomendasikan: "Tutorial Sudut"]

Pertama, mari kita pahami apa itu lintas domain.

lintas-domain

: Ketika url任意一个tiga bagian协议、域名（ip地址）、端口permintaan dan halaman saat ini berbeda, itu adalah lintas-domain .

Ambil situs saya https://jimmyarea.com sebagai contoh:

Proxy

Saat ini, kita dapat menggunakan proxy untuk bersama-sama men-debug alamat api dari lingkungan yang berbeda.

Pertama, kita membuat file baru proxy.conf.json di direktori root proyek.

Kami mengambil permintaan antarmuka https://jimmyarea.com/api/public/article?page=-1 sebagai contoh:

{
  "/ api": {
    "target": "https://jimmyarea.com/",
    "changeOrigin": benar,
    "aman": salah,
    "jalurTulis Ulang": {
      "^/api": "/api"
    }
  }
}

target adalah alamat agen, pathRewrite adalah penulisan ulang awalan agen.

Setelah menyelesaikan file proxy, Anda perlu mengaktifkan proxy tersebut. Kami menambahkan satu baris perintah lagi ke package.json , yang menunjukkan bahwa baris tersebut digunakan untuk debugging di lingkungan pengembangan.

"skrip": {
  "dev": "ng layani --proxy-config=proxy.conf.json",
}

Jalankan npm run dev untuk memulai proyek dan menghadirkan agen. Setiap kali file proxy berubah, Anda perlu me-restart baris perintah

untuk memverifikasi bahwa

kami telah membuat layanan article baru. Isi file article.service.ts adalah sebagai berikut:

import { Injectable } from '@angular/core' ;
// klien http mengimpor { HttpClient } dari '@angular/common/http'

@Dapat disuntik({
  disediakan di: 'root'
})

kelas ekspor Layanan Artikel {

  konstruktor(
    http pribadi: HttpClient
  ) {}
   
  // Dapatkan daftar artikel getArticleList() {
    kembalikan ini.http.get('/api/public/article', {
      //Jenis pengembalian tipe respons: 'json',
      //Permintaan parameter parameter: {
        halaman: -1
      }
    })
  }

}

Untuk request di atas, alamat pada halaman tersebut adalah http:// https://jimmyarea.com/api/public/article?page=-1 http://localhost:4200/api/public/article?page=-1 . https://jimmyarea.com/api/public/article?page=-1 . Kita dapat memverifikasinya dengan memanggilnya di user-list.component.ts :

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    selanjutnya: (data: apa saja) => {
      konsol.log(data)
    },
    kesalahan: () => {}
  })
  // ...
}

Setelah program dijalankan, Anda dapat melihat permintaan jaringan berikut di konsol:

Good Job Gan, kita bisa dengan sempurna mem-proxy alamat yang diberikan oleh backend dan melakukan debug, dan proxy tersebut bisa mem-proxy lebih dari satu alamat. Pembaca dapat menulis beberapa alamat proxy untuk memverifikasi~

[Akhir]