Angular에서 Api 프록시를 사용하는 방법에 대한 간략한 분석

프론트엔드 개발자로서 우리는 백엔드와 자주 인터페이스하지만 도킹 과정에서 항상 도메인 간 문제가 발생하는데 어떻게 해결합니까?

이 기사에서는 angualr 사용하여 에이전트 api 도킹 주제를 설명합니다. [관련 추천 튜토리얼: "Angular Tutorial"]

먼저 크로스 도메인(Cross-Domain)이 무엇인지 알아보겠습니다.

크로스 도메인

:协议、域名（ip地址）、端口의 세 부분任意一个의 url 과 현재 페이지가 다른 경우 크로스 도메인입니다 .

내 사이트 https://jimmyarea.com 예로 들어 보겠습니다

프록시

현재 프록시를 사용하여 다양한 환경의 api 주소를 로컬에서 공동으로 디버깅할 수 있습니다.

먼저 프로젝트의 루트 디렉터리에 새 파일인 proxy.conf.json 만듭니다.

인터페이스 요청 https://jimmyarea.com/api/public/article?page=-1 예로 들어 보겠습니다.

{
  "/api": {
    "대상": "https://jimmyarea.com/",
    "changeOrigin": 사실,
    "보안": 거짓,
    "경로재작성": {
      "^/api": "/api"
    }
  }
}

target 에이전트의 주소이고, pathRewrite 에이전트의 접두사를 다시 작성하는 것입니다.

프록시 파일을 완성한 후에는 프록시를 활성화해야 합니다. package.json 에 명령줄을 하나 더 추가하여 개발 환경에서 디버깅에 사용됨을 나타냅니다.

"스크립트": {
  "dev": "ng Serve --proxy-config=proxy.conf.json",
}

npm run dev 실행하여 프로젝트를 시작하고 에이전트를 가져옵니다. 프록시 파일이 변경될 때마다 명령줄을 다시 시작하여

새 article 서비스가 생성 article.service.ts

확인해야 합니다

import { Injectable } from '@angular/core' ;
// http 클라이언트 import { HttpClient } from '@angular/common/http'

@주입 가능({
  제공됨: '루트'
})

내보내기 클래스 ArticleService {

  건설자(
    비공개 http: HttpClient
  ) { }
   
  // 기사 목록 가져오기 getArticleList() {
    return this.http.get('/api/public/article', {
      //반환 유형 responseType: 'json',
      //요청 매개변수 params: {
        페이지: -1
      }
    })
  }

}

위 요청의 경우 페이지의 주소는 http://localhost:4200/api/public/article?page=-1 입니다. 실제로 접속한 주소는 https://jimmyarea.com/api/public/article?page=-1 입니다. https://jimmyarea.com/api/public/article?page=-1 . user-list.component.ts 에서 호출하여 이를 확인할 수 있습니다.

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    다음: (데이터: 임의) => {
      console.log(데이터)
    },
    오류: () => {}
  })
  // ...
}

프로그램이 실행된 후 콘솔에서 다음 네트워크 요청을 볼 수 있습니다.

잘했어요, Bro. 우리는 백엔드에서 제공한 주소를 완벽하게 프록시하고 디버깅할 수 있으며 프록시는 두 개 이상의 주소를 프록시할 수 있습니다. 독자는 여러 개의 프록시 주소를 작성하여 확인할 수 있습니다~

[끝]