Angular форма отправки данных запроса

Question

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

Это мой html файл

<div>
  <input placeholder="Enter post" [(ngModel)]="posts.text"/>
  <button type="button" (click)="create_Post()">Post</button>
</div>

Тогда у меня есть класс сообщений

export class Posts {
  text: string;
}

Это мой класс почтовых услуг

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {catchError, map} from 'rxjs/operators';
import {throwError} from 'rxjs';
import {Posts} from './posts';

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

  constructor(private http: HttpClient) { }

  createPost(posts: Posts[]) {
    return this.http.post(`http://xx.xx.xx.xx:9200/users/_doc`, posts).
    pipe(
      map((data: any) => {
        return data;
      }), catchError( error => {
        return throwError( 'Something went wrong!' );
      })
    );
  }
}

И последний из них - мой класс компонента почты

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {PostCreateService} from './post-create.service';


@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {

  posts: any = {};

  constructor(private http: HttpClient, private createpost: PostCreateService) {}

  create_Post(){
    this.createpost.createPost(this.posts).subscribe((res)=>{
    });
  }


  ngOnInit(): void {
  }

}

РЕДАКТИРОВАТЬ: я изменил его, как сказано в комментариях, и теперь я получаю ошибку CORS "от источника" http://localhost: 4200 ' была заблокирована политикой CORS "

Answer 1

Чтобы разрешить cors из режима разработки, вы должны начать с прокси. Это часть angular.

примера proxy.conf. json

{
  "/rest/elastic/*": {
    "target": "http://elastic.host.path",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

и подачи команды

ng serve --proxy-config proxy.conf.json