Как сделать простейший http-запрос возможным в Angular?

Question

Изо всех сил пытаюсь получить простую http-публикацию, вот код, который у меня есть:

var config = {
      headers : {
          'Content-Type': 'application/json'
      }
    }

    var data = {
      "gender":"M"
    };

    this.http.post<any>("http://localhost:8080/rest/endpoint", JSON.stringify(data), config)
    .subscribe(
        (val) => {
            console.log("POST call successful value returned in body", 
                        val);
        },
        response => {
            console.log("POST call in error", response);
        },
        () => {
            console.log("The POST observable is now completed.");
        }
    );
  }

Этот запрос вызывается нажатием кнопки, и при выполнении я вижу его на вкладке сети Chrome.что был выполнен HTTP-запрос OPTIONS, который вернул GET, HEAD, POST, PUT, DELETE, OPTIONS и затем POST, но, похоже, он не отправил данные тела, которые я намеревался отправить, ниже я вижуво вкладке сети:

**General**
Request URL: http://localhost:8080/rest/endpoint
Request Method: OPTIONS
Status Code: 200 
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade
**Response Headers:**
Allow: GET, HEAD, POST, PUT, DELETE, OPTIONS
Content-Length: 0
Date: Mon, 22 Apr 2019 11:18:51 GMT
**Request Headers:**
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,pt-BR;q=0.8,pt;q=0.7
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Mobile Safari/537.36

Answer 1

В Angular рекомендуется поддерживать сервис и компонент отдельно.
Если вы используете Angular Cli, вы можете создать новый сервис с помощью ng g serviceName
Добавить / включить сервис в свой модуль приложения.(корневой модуль) в массиве провайдеров, чтобы сделать его глобально доступным. Вы можете сделать сервис локальным, включив его в конкретный файл component.ts.
Я предоставлю вам основные перспективы / работы.В service.ts импортируйте необходимые модули.

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpParams, HttpErrorResponse } from "@angular/common/http";
import { Observable } from "rxjs";
@Injectable({
  providedIn: 'root'
})
export class serviceName {
  private url = `http://localhost:8080/rest/endpoint`
  constructor(private http: HttpClient) { }

  //method 
  public newGender(data): Observable<any> {
    const params = new HttpParams()
      .set('gender', data.gender)
    return this.http.post(`${this.url}`, params)
  }

In component.ts

constructor(service:serviceName){}
//subscribe to service now
//method
public methodName=()=>{
   let data = {
      "gender":"M"
    };
this.service.newGender(data).susbcribe(
response=>{
//your response
})
} //end method (call this method if needed)