Un breve análisis de cómo usar el proxy Api en Angular

Como desarrollador de front-end, frecuentemente interactuamos con el back-end. Sin embargo, siempre encontramos problemas entre dominios durante el proceso de acoplamiento, entonces, ¿cómo los solucionamos?

Este artículo utiliza angualr para explicar el tema del acoplamiento de api del agente. [Tutoriales relacionados recomendados: "Tutorial angular"]

Primero, comprendamos qué es el dominio cruzado.

dominio cruzado

: cuando url de任意一个las tres partes协议、域名（ip地址）、端口de una solicitud y la página actual son diferentes, se trata de dominio cruzado .

Tome mi sitio https://jimmyarea.com como ejemplo:

El proxy

En este momento, podemos usar el proxy para depurar localmente de forma conjunta las direcciones api de diferentes entornos.

Primero, creamos un nuevo archivo proxy.conf.json en el directorio raíz del proyecto.

Tomamos la solicitud de interfaz https://jimmyarea.com/api/public/article?page=-1 como ejemplo:

{
  "/api": {
    "objetivo": "https://jimmyarea.com/",
    "cambioOrigen": verdadero,
    "seguro": falso,
    "rutaReescritura": {
      "^/api": "/api"
    }
  }
}

target es la dirección del agente, pathRewrite es la reescritura del prefijo del agente.

Después de completar el archivo proxy, debe habilitar el proxy. Agregamos una línea de comando más a package.json , indicando que se usa para depurar en el entorno de desarrollo.

"guion": {
  "dev": "ng servir --proxy-config=proxy.conf.json",
}

Ejecute npm run dev para iniciar el proyecto y traer el agente. Cada vez que cambia el archivo proxy, debe reiniciar la línea de comando

para verificar que

hayamos creado un nuevo servicio article . El contenido del archivo article.service.ts es el siguiente:

importar {Injectable} desde '@angular/core'. ;
// importación de cliente http { HttpClient } desde '@angular/common/http'

@Inyectable({
  proporcionado en: 'raíz'
})

clase de exportación ArticleService {

  constructor(
    http privado: HttpClient
  ) { }
   
  // Obtener la lista de artículos getArticleList() {
    devuelve this.http.get('/api/public/article', {
      //Tipo de retorno tipo de respuesta: 'json',
      // Solicitar parámetros params: {
        página: -1
      }
    })
  }

}

Para la solicitud anterior, la dirección de la página es http://localhost:4200/api/public/article?page=-1 . De hecho, la dirección a la que se accede es https://jimmyarea.com/api/public/article?page=-1 . Podemos verificarlo llamándolo en user-list.component.ts :

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    siguiente: (datos: cualquiera) => {
      consola.log(datos)
    },
    error: () => {}
  })
  //...
}

Después de que se ejecute el programa, podrá ver las siguientes solicitudes de red en la consola:

Buen trabajo, hermano. Podemos representar perfectamente la dirección proporcionada por el backend y depurarla, y el proxy puede representar más de una dirección. Los lectores pueden escribir varias direcciones proxy para verificar ~

[Fin]