Usando Api Proxy em Angular

Crie o hábito de escrever juntos! Este é o 5º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .

Como um desenvolvimento front-end, é muito comum fazermos interface com o back-end. No entanto, sempre encontramos problemas entre domínios no processo de docking, então como resolvê-los?

Este artigo usa angualrpara explicar apio tópico de encaixe do agente.

Antes de mais nada, vamos entender o que é cross-domain.

domínio cruzado

Compreensão simples: quando as três partes de uma solicitação são diferentes da协议、域名（ip地址）、端口任意一个url ela é de domínio cruzado .

Tome meu site https://jimmyarea.comcomo exemplo :

o endereço solicitado	É entre domínios	razão
jimmyarea. com	sim	protocolos diferentes
jimmyarea.cn	sim	endereços diferentes
https://127.0.0.1:9000	sim	endereço diferente e número de porta

atuação

Neste momento, podemos usar o proxy para depurar localmente os apiendereços .

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

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

{
  "/api": {
    "target": "https://jimmyarea.com/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api": "/api"
    }
  }
}
复制代码

targeté o endereço do proxy e pathRewriteé uma reescrita do prefixo do proxy.

Depois de concluir o arquivo proxy, você precisa habilitar o proxy. package.jsonAdicionamos mais uma linha de comando em , indicando que ela é usada para depuração no ambiente de desenvolvimento.

"script": {
  "dev": "ng serve --proxy-config=proxy.conf.json",
}
复制代码

Execute o projeto de npm run devinicialização e traga o agente. Toda vez que o arquivo proxy muda, você precisa reiniciar a linha de comando~

verificar

Criamos um articlenovo serviço, onde o article.service.tsconteúdo do arquivo é o seguinte:

import { Injectable } from '@angular/core';
// http 客户端
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})

export class ArticleService {

  constructor(
    private http: HttpClient
  ) { }
   
  // 获取文章列表
  getArticleList() {
    return this.http.get('/api/public/article', {
      // 返回类型
      responseType: 'json',
      // 请求的参数
      params: {
        page: -1
      }
    })
  }

}
复制代码

Na requisição acima, o endereço na página é http://localhost:4200/api/public/article?page=-1, na verdade, o acesso é o endereço https://jimmyarea.com/api/public/article?page=-1. Podemos verificar isso user-list.component.tschamando :

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    next: (data: any) => {
      console.log(data)
    },
    error: () => {}
  })
  // ...
}
复制代码

Depois que o programa estiver em execução, você poderá ver as seguintes solicitações de rede no console:

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

【Fim】✅