Как создать прокси-сервер для проекта Angular и взаимодействовать с ним с помощью HTTP-запросов GET и PUT? - PullRequest
Новая
       21

Как создать прокси-сервер для проекта Angular и взаимодействовать с ним с помощью HTTP-запросов GET и PUT?

0 голосов
/ 09 февраля 2020

Я работаю над проектом Angular, который предусматривает отправку данных (как JSON) на сервер с помощью HTTP-запроса POST / PUT. База данных представляет собой список JSON, к которому добавляется новый одиночный JSON каждый раз, когда запрос POST / PUT отправляет ему новый JSON. В каждом запросе PUT / POST шаблон JSON выглядит следующим образом: 

{
  "prop1": "123456",
  "prop2": "abc",
  "prop3": "xyz"
}

Давайте назовем выше JSON класса Hero, который имеет те же поля / свойства.

Список JSON в базе данных выглядит примерно так: 

[
 {
   "prop1": "123456",
   "prop2": "abc",
   "prop3": "xyz"
 },

 {
   "prop1": "456789"
   "prop2": "abcd"
   "prop3": "xyzz"
 },

 .....
]

Теперь я также использую HTTP-запрос GET для получения JSON из базы данных с помощью поля «prop1». Чтобы указать запрос на основе "prop1", я использую шаблон следующего типа, указанный на официальном Angular веб-сайте https://angular.io/guide/http

import {HttpParams} from "@angular/common/http";

/* GET heroes whose name contains search term */
searchHeroes(prop1Value: string): Observable<Hero[]> {
  prop1Value = prop1Value.trim();

  // Add safe, URL encoded search parameter if there is a search term
  const options = prop1Value ? { params: new HttpParams().set('prop1', prop1Value) } : {};

  return this.http.get<Hero[]>(this.heroesUrl, options)
    .pipe(catchError(this.handleError<Hero[]>('searchHeroes', [])));
}

Проблема заключается в том, он извлекает все записи JSON, то есть весь список JSON из серверной части, вместо того, чтобы возвращать только JSON со значением поля "prop1" в качестве prop1Value.

Я опробовал несколько Варианты для свойства 'options' следующие, но все они работают одинаково, то есть извлекают весь список JSON, хранящихся в базе данных, вместо одного JSON, удовлетворяющего запросу. 

const options = { params: new HttpParams().set('prop1', prop1Value) };


const params = new HttpParams({fromString: 'prop1='+prop1Value});
const options = {params};

Я также sh, чтобы уточнить еще одну вещь. Вместо того, чтобы иметь надлежащую базу данных, я просто создал папку с именем «api» прямо в папке «sr c». Внутри папки «api» я создал 2 папки: «folder1» и «folder2». Внутри 'folder1' у меня есть файл json с именем 'recordslist. json', который содержит список JSON. Я запускаю свою веб-страницу интерфейса на localhost:9000 и только что указал api/folder1/recordslist.json в качестве пути (значения) к herosUrl. Обратите внимание, что запрос GET работает, просто часть запроса / фильтра не работает, т.е. вместо получения спецификаций c JSON, удовлетворяющих запросу, он получает весь список JSON. Пожалуйста, помогите мне в решении этой проблемы.

Другая проблема, с которой я сталкиваюсь, заключается в том, что мой запрос POST / PUT вообще не работает. В браузере-> проверять-> консоль выдает различные типы ошибок, в основном 504 (время ожидания шлюза). Из-за этого он не может написать / добавить новый JSON в список JSON. Обратите внимание, что целевой URL такой же, то есть api/folder1/recordslist.json

Мой запрос PUT выглядит следующим образом: 

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero): Observable<Hero> {
  return this.http.put<Hero>(this.heroesUrl, hero)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

Я также пробовал следующие варианты: 

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero): Observable<Hero> {
  return this.http.put<any>(this.heroesUrl, hero)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero) {
  return this.http.put<any>(this.heroesUrl, hero)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

Пройдя много статей о Inte rnet, включая Stackoverflow, я также дважды проверил различные другие вещи, упомянутые людьми.

Например, я увидел следующий код в proxy.conf.json file 

{
  "/api": {
    "target": {
               "port": 8080},
    "secure": false
  }
}

Включая это, я также попробовал следующие варианты этого: 

{
  "/api": {
    "target": {
               "port": 3000},
    "secure": false
  }
}


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

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

Ошибки в Inspect- > Консоль в основном относилась к следующим: «Внутренняя ошибка сервера», «Тайм-аут шлюза», «Плохой шлюз».

В командной строке в основном ошибка, отображаемая при выполнении запроса PUT, была примерно следующей: 

Error occurred while trying to proxy request /api/folder1/recordslist.json from localhost:9000 to (port 8080) (ECONNREFUSED) nodejs.org/api/errors.html#errors_common_system_errors)

Я также подтвердил, что приведенный ниже код существует в файле angular. json: 

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    }

Из моего анализа я думаю, что есть некоторая проблема с часть прокси-сервера, из-за которой запрос PUT не может Обратись к моему JSON файлу. Однако странно, что запрос GET может извлечь записи из того же файла.

Я просмотрел несколько ссылок на Inte rnet, таких как https://angular.io/guide/build, https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md, https://github.com/saikat/react-apollo-starter-kit/issues/20 https://blog.angular-university.io/angular-http/ et c.

Мне так и не удалось найти решение обеих моих проблем. Я действительно прошу кого-нибудь помочь с обеими этими проблемами:

  1. Получение указанных c записей с использованием HTTP-запроса Get из моего api/folder1/recordslist.json файла
  2. Обеспечение работы HTTP PUT и возможность добавьте JSON к моему api/folder1/recordslist.json файлу

Поверьте, я действительно много пытался решить эту проблему. Таким образом, это может занять что-то действительно сложное. Любая помощь приветствуется.

Обратите внимание, что в GET rqst я хочу, чтобы мое значение prop1Value передавалось с использованием переменной, а не кодировалось жестко, например "prop1='123456'". Скорее чем-то вроде prop1Value = "123456"; "prop1="+prop1Value;

Также, пожалуйста, дайте мне знать, почему работает запрос GET, а запрос PUT не выполняется.

...