Конфигурация прокси Angular для вызовов API

Проблема, с которой я недавно столкнулся при запуске нового проекта с использованием Spring Boot и Angular, заключается в правильном доступе/использовании бэкенд API для предоставления данных клиенту.

Я разработал очень простое CRUD приложение, которое просто отвечает за отображение списка сотрудников.

API url для получения списка сотрудников: http://localhost:8080/api/v1/employees и ответ выглядел следующим образом:

Теперь я хотел использовать свой API для доставки данных клиенту/приложениюangular. Я создал employee.service, который просто выполняет вызов API.

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, которого не существовало. Вызов был на порт 4200, а не на 8080 — порт моего бэкенда. Вот эта ошибка, которую я получил:

Конечно, я могу жестко закодировать полный url в моем сервисе, используя localhost:8080, так что это будет:

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/* — все обращения к этому урлу должны использовать ‘target’ url
secure: false — мы не используем https
logLevel: debug — может быть очень полезным.

Последнее, что нужно сделать, это изменить файл 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/

Конфигурация прокси Angular для вызовов API

Рекомендуем почитать: