Une brève analyse de la façon d'utiliser le proxy Api dans Angular

En tant que développeur front-end, nous interagissons fréquemment avec le back-end. Cependant, nous rencontrons toujours des problèmes inter-domaines pendant le processus d'amarrage, alors comment les résoudre ?

Cet article utilise angualr pour expliquer le sujet de l'accueil api de l'agent. [Tutoriels associés recommandés : "Tutoriel Angular"]

Tout d'abord, comprenons ce qu'est le cross-domain.

cross-domain

: lorsque url de任意一个trois parties du协议、域名（ip地址）、端口d'une requête et la page actuelle sont différents, il s'agit d'un cross-domain .

Prenons mon site https://jimmyarea.com comme exemple :

proxy

À ce stade, nous pouvons utiliser le proxy pour déboguer localement conjointement les adresses api de différents environnements.

Tout d’abord, nous créons un nouveau fichier proxy.conf.json dans le répertoire racine du projet.

Nous prenons comme exemple la requête d'interface https://jimmyarea.com/api/public/article?page=-1 :

{
  "/api": {
    "target": "https://jimmyarea.com/",
    "changeOrigin": vrai,
    "sécurisé" : faux,
    "pathRewrite": {
      "^/api": "/api"
    }
  }
}

target est l'adresse de l'agent, pathRewrite est la réécriture du préfixe de l'agent.

Après avoir terminé le fichier proxy, vous devez activer le proxy. Nous ajoutons une ligne de commande supplémentaire à package.json , indiquant qu'elle est utilisée pour le débogage dans l'environnement de développement.

"scénario": {
  "dev": "ng serve --proxy-config=proxy.conf.json",
}

Exécutez npm run dev pour démarrer le projet et amener l'agent. Chaque fois que le fichier proxy change, vous devez redémarrer la ligne de commande

pour vérifier que

nous avons créé un nouveau service article . Le contenu du fichier article.service.ts est le suivant :

import { Injectable } from '@angular/core'. ;
// Importation du client http { HttpClient } depuis '@angular/common/http'

@Injectable({
  fourni dans : 'root'
})

classe d'exportation ArticleService {

  constructeur(
    http privé : HttpClient
  ) { }
   
  // Récupère la liste des articles getArticleList() {
    renvoie this.http.get('/api/public/article', {
      //Type de réponseresponsType : 'json',
      //Paramètres de la requête : {
        page : -1
      }
    })
  }

}

Pour la requête ci-dessus, l'adresse sur la page est http://localhost:4200/api/public/article?page=-1 . En fait, l'adresse consultée est https://jimmyarea.com/api/public/article?page=-1 . Nous pouvons le vérifier en l'appelant dans user-list.component.ts :

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    suivant : (données : toutes) => {
      console.log(données)
    },
    erreur : () => {}
  })
  //...
}

Une fois le programme exécuté, vous pouvez voir les requêtes réseau suivantes sur la console :

Bon travail, frère. Nous pouvons parfaitement proxy l'adresse donnée par le backend et la déboguer, et le proxy peut proxy plus d'une adresse. Les lecteurs peuvent écrire plusieurs adresses proxy pour vérifier ~

[Fin]