Uma breve análise de como usar o proxy Api em Angular

Como desenvolvedor front-end, frequentemente fazemos interface com o back-end. No entanto, sempre encontramos problemas entre domínios durante o processo de encaixe, então como podemos resolvê-los?

Este artigo usa angualr para explicar o tópico de acoplamento api do agente. [Tutoriais relacionados recomendados: "Tutorial Angular"]

Primeiro, vamos entender o que é domínio cruzado.

domínio cruzado

: quando url de任意一个das três partes协议、域名（ip地址）、端口de uma solicitação e a página atual são diferentes, é domínio cruzado .

Veja meu site https://jimmyarea.com como exemplo:

O proxy

Neste momento, podemos usar o proxy para depurar localmente os endereços api de diferentes ambientes.

Primeiro, criamos um novo arquivo proxy.conf.json no diretório raiz do projeto.

Tomamos a solicitação de interface https://jimmyarea.com/api/public/article?page=-1 como exemplo:

{
  "/api": {
    "alvo": "https://jimmyarea.com/",
    "changeOrigin": verdadeiro,
    "seguro": falso,
    "caminhoRewrite": {
      "^/api": "/api"
    }
  }
}

target é o endereço do agente, pathRewrite é a reescrita do prefixo do agente.

Após concluir o arquivo proxy, você precisa habilitar o proxy. Adicionamos mais uma linha de comando a package.json , indicando que ela é usada para depuração no ambiente de desenvolvimento.

"roteiro": {
  "dev": "ng serve --proxy-config=proxy.conf.json",
}

Execute npm run dev para iniciar o projeto e trazer o agente. Cada vez que o arquivo proxy é alterado, você precisa reiniciar a linha de comando

para verificar se

criamos um novo serviço article . O conteúdo do arquivo article.service.ts é o seguinte:

import { Injectable } from '@angular/core'. ;
// cliente http importa { HttpClient } de '@angular/common/http'

@Injetável({
  fornecidoIn: 'root'
})

classe de exportação ArticleService {

  construtor(
    http privado: HttpClient
  ) { }
   
  // Obtém a lista de artigos getArticleList() {
    retorne isto.http.get('/api/public/article', {
      //Tipo de retorno tipoderesposta: 'json',
      //Solicita parâmetros params: {
        página: -1
      }
    })
  }

}

Para a solicitação acima, o endereço na página é http://localhost:4200/api/public/article?page=-1 . Na verdade, o endereço acessado é https://jimmyarea.com/api/public/article?page=-1 . Podemos verificá-lo chamando-o em user-list.component.ts :

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    próximo: (dados: qualquer) => {
      console.log(dados)
    },
    erro: () => {}
  })
  // ...
}

Após a execução do programa, você poderá ver as seguintes solicitações de rede no console:

Bom trabalho, mano. Podemos fazer proxy perfeitamente do endereço fornecido pelo back-end e depurá-lo, e o proxy pode fazer proxy de mais de um endereço. Os leitores podem escrever vários endereços proxy para verificar ~

[Fim]