API 호출을 위한 Angular 프록시 구성

Spring Boot와 Angular를 사용하여 새 프로젝트를 시작할 때 최근 직면한 문제는 클라이언트에 데이터를 제공하기 위해 백엔드 API에 올바르게 액세스/사용하는 것입니다.

직원 목록 표시를 담당하는 매우 기본적인 CRUD 응용 프로그램을 개발했습니다.

직원 목록을 가져오기 위한 API URL은 http://localhost:8080/api/v1/employees이며 응답은 다음과 같습니다.



이제 API를 사용하여 클라이언트/앵귤러 애플리케이션에 데이터를 전달하고 싶었습니다. 단순히 API를 호출하는 employee.service를 만들었습니다.

import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {Employee} from "../model/employee";

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private baseURL = "/api/v1/employees"

  constructor(private httpClient: HttpClient) {
  }

  getEmployeesList(): Observable<Employee[]> {
    return this.httpClient.get<Employee[]>(`${this.baseURL}`)
  }

}

애플리케이션을 새로 고쳤을 때 Firebug에서 존재하지 않는 API에 대한 호출이 있음을 확인했습니다. 통화는 내 백엔드 포트인 8080이 아닌 포트 4200에서 이루어졌습니다. 내가 얻은 오류는 다음과 같습니다.



물론 localhost:8080을 사용하여 내 서비스의 전체 URL을 하드코딩할 수 있으므로 다음과 같습니다.

private baseURL = "http://localhost:8080/api/v1/employees"

그러나 이것은 특히 조만간 프로덕션 서버에 앱을 배포하려는 경우 갈 길이 아닙니다. 그럼에도 불구하고 어떻게 될지 보기 위해 서비스에서 URL을 변경하고 무슨 일이 일어나는지 확인했습니다. 잘 알려진 CORS 오류를 보았습니다.



이 문제에 대한 올바른 해결책은 프록시를 사용하는 것입니다!

proxy.config.json 파일이라는 새 파일을 만들고 적절한 구성을 추가해야 하므로 angular는 정확히 이 구성을 사용하여 모든 API 엔드포인트를 호출합니다. 내 경우이 파일은 다음과 같습니다.

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
} 

파일은 Angular 프로젝트의 루트 폴더에 있어야 합니다. 보시다시피 여기에 몇 가지가 정의되어 있습니다.

/api/* – 이 URL에 대한 모든 호출은 '대상' URL을 사용해야 합니다.

보안: 거짓 – https를 사용하지 않음

logLevel: 디버그 - 매우 유용할 수 있음

마지막으로 해야 할 일은 package.json 파일의 변경입니다. ng start 정의에는 이제 프록시 파일 사용이 포함되어야 합니다. 다음과 같이 해야 합니다.

  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

이제 ng start를 실행하면 모든 데이터가 최종적으로 백엔드 애플리케이션에서 클라이언트로 전달됩니다.



그게 다야! 언젠가 누군가에게 도움이 되길 바랍니다


https://developersmill.com/