Почему пост метод показывает ошибку в угловых 6

Question

Я работаю над проектом angular 6 и хочу отправить запрос методом post. Он работает нормально с методом get, но когда я пытаюсь использовать метод post, я получаю сообщение об ошибке: Ошибка

Я думаю, что эта проблема связана с CORS, но я не знаю, как ее решить. Если кто-нибудь знает решение, пожалуйста, помогите.

home.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  console = console;
  public form = {

  };
  id = 10;
  public item:any[];
  public item2:any[];
  private url1 = `http://localhost/api.php?id=${this.id}`;
  private url2 = `http://localhost/api.php`;

  constructor(private http:HttpClient) { }

  ngOnInit() {
    return this.http.get(this.url1).subscribe( result=>{
      this.item = result as caster[];
      console.log(this.item);
    });
  }

  /**
   * onSubmit
   */
  public onSubmit() {
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
    return this.http.post(this.url2, {'id': 3},  httpOptions).subscribe( result=>{
      this.item2 = result as caster[];      
      console.log(this.item2)      
    });
  }
}
interface caster {
  id: number;
  name: string
  age: number 
}

home.component.html

<form #loginForm="ngForm" (ngSubmit)="onSubmit()">  
  <button type="submit">Save</button>
</form>