Краткий анализ того, как использовать прокси-сервер Api в Angular

Как фронтенд-разработчик, мы часто взаимодействуем с серверной частью. Однако в процессе стыковки мы всегда сталкиваемся с междоменными проблемами, так как же нам их решить?

В этой статье angualr используется для объяснения темы стыковки api агента. [Рекомендуемые соответствующие руководства: «Учебное пособие по Angular»]

Во-первых, давайте разберемся, что такое междоменный подход.

междоменного подхода

: когда url任意一个трех частей协议、域名（ip地址）、端口запроса и текущая страница различаются, это междоменный домен .

Возьмем в качестве примера мой сайт https://jimmyarea.com :

Прокси

На данный момент мы можем использовать прокси для локальной совместной отладки адресов api различных сред.

Сначала мы создаем новый файл proxy.conf.json в корневом каталоге проекта.

В качестве примера возьмем запрос интерфейса https://jimmyarea.com/api/public/article?page=-1 :

{
  "/апи": {
    "target": "https://jimmyarea.com/",
    «changeOrigin»: правда,
    «безопасный»: ложь,
    "pathRewrite": {
      "^/апи": "/апи"
    }
  }
}

target — адрес агента, pathRewrite — перезапись префикса агента.

После завершения создания прокси-файла вам необходимо включить прокси. Добавляем в package.json еще одну командную строку, указывающую, что она используется для отладки в среде разработки.

"скрипт": {
  "dev": "ng submit --proxy-config=proxy.conf.json",
}

Выполните npm run dev чтобы запустить проект и запустить агент. Каждый раз при изменении прокси-файла вам необходимо перезапускать командную строку,

чтобы убедиться, что

мы создали новый сервис article . Содержимое article.service.ts следующее:

import { Injectable } from '@angular/core'. ;
// импорт http-клиента { HttpClient } из '@angular/common/http'

@Инъекционный({
  предоставлено: 'корень'
})

класс экспорта ArticleService {

  конструктор(
    частный http: HttpClient
  ) { }
   
  // Получаем список статей getArticleList() {
    верните this.http.get('/api/public/article', {
      //Тип возвращаемого значения responseType: 'json',
      //Параметры запроса: {
        страница: -1
      }
    })
  }

}

Для приведенного выше запроса адрес на странице — http://localhost:4200/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(данные)
    },
    ошибка: () => {}
  })
  // ...
}

После запуска программы вы увидите в консоли следующие сетевые запросы:

Хорошая работа, братан. Мы можем идеально проксировать адрес, указанный серверной частью, и отладить его, а прокси может проксировать более одного адреса. Читатели могут написать несколько прокси-адресов для проверки~

[Конец]