title: Angular 7 POST method to PHP server not working
body: <p>I'm using <code>HttpClient</code> to POST data from Angular 7 to PHP server.
  A reactive form takes the necessary data from the user and then posts it to an url with the following:</p>
  
  <p><code>admin.component.ts</code>:</p>
  
  <pre><code>constructor(private postMedicineService: MedicineService) { }
  
   ngOnInit() {
      this.medicineInfo = new FormGroup({
        name: new FormControl(null, Validators.required),
        description: new FormControl(null, Validators.required),
        category: new FormControl(null, Validators.required),
        image: new FormControl(null, Validators.required),
        price: new FormControl(null, Validators.required)
      });
  }
  
    submitMedicineInfo() {
      this.postMedicineService.postMedicine(this.medicineInfo.value)
        .subscribe(
          (response) =&gt; console.log(response),
          (error) =&gt; console.log(error)
        );
    }
  </code></pre>
  
  <p><code>medicine.service.ts</code>:</p>
  
  <pre><code>const postUrl = 'http://localhost/petrapharm-backend/create.php';
  
  @Injectable()
  export class MedicineService {
  
      constructor(private httpClient: HttpClient) { }
  
      postMedicine(medicine: Medicine) {
          console.log(medicine);
          return this.httpClient.post(postUrl, medicine);
      }
  }
  </code></pre>
  
  <p><code>medicine-object.service.ts</code>:</p>
  
  <pre><code>export interface Medicine {
      name: String;
      description: String;
      category: String;
      image: File;
      price: number;
  }
  </code></pre>
  
  <p>And finally I have the PHP server that takes the POST request from the Angular 7 app with the following:</p>
  
  <p><code>create.php</code>:</p>
  
  <pre><code>&lt;?php
  // required headers
  header("Access-Control-Allow-Origin: *");
  header("Content-Type: application/json; charset=UTF-8");
  header("Access-Control-Allow-Methods: POST");
  header("Access-Control-Max-Age: 3600");
  header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
  
  // get database connection
  include_once './database.php';
  
  // instantiate product object
  include_once './medicine.php';
  
  $database = new Database();
  $db = $database-&gt;getConnection();
  
  $product = new Medicine($db);
  
  // get posted data
  $data = json_decode(file_get_contents("php://input"));
  
  
  // make sure data is not empty
  if(
      !empty($data-&gt;name) &amp;&amp;
      !empty($data-&gt;description) &amp;&amp;
      !empty($data-&gt;category) &amp;&amp;
      !empty($data-&gt;image) &amp;&amp;
      !empty($data-&gt;price)
  ){
  
      // set product property values
      $product-&gt;name = $data-&gt;name;
      $product-&gt;description = $data-&gt;description;
      $product-&gt;category = $data-&gt;category;
      $product-&gt;image = $data-&gt;image;
      $product-&gt;price = $data-&gt;price;
  
      // create the product
      if($product-&gt;create()){
  
          // set response code - 201 created
          http_response_code(201);
  
          // tell the user
          echo json_encode(array("message" =&gt; "Product was created."));
      }
  
      // if unable to create the product, tell the user
      else{
  
          // set response code - 503 service unavailable
          http_response_code(503);
  
          // tell the user
          echo json_encode(array("message" =&gt; "Unable to create product."));
      }
  }
  
  // tell the user data is incomplete
  else{
  
      // set response code - 400 bad request
      http_response_code(400);
  
      // tell the user
      echo json_encode(array("message" =&gt; "Unable to create product. Data is incomplete."));
  }
  ?&gt;
  </code></pre>
  
  <p><code>medicine.php</code>:</p>
  
  <pre><code>&lt;?php
  class Medicine{
  
      // database connection and table name
      private $conn;
      private $table_name = "medicine";
  
      // object properties
      public $id;
      public $name;
      public $description;
      public $category;
      public $image;
      public $price;
  
      // constructor with $db as database connection
      public function __construct($db){
          $this-&gt;conn = $db;
      }
  
      // create product
      function create(){
  
          // query to insert record
          $query = "INSERT INTO
                  " . $this-&gt;table_name . "
              SET
                  name=:name, description=:description, category=:category, image=:image, price=:price";
  
          // prepare query
          $stmt = $this-&gt;conn-&gt;prepare($query);
  
          // sanitize
          $this-&gt;name=htmlspecialchars(strip_tags($this-&gt;name));
          $this-&gt;description=htmlspecialchars(strip_tags($this-&gt;description));
          $this-&gt;category=htmlspecialchars(strip_tags($this-&gt;category));
          $this-&gt;image=htmlspecialchars(strip_tags($this-&gt;image));
          $this-&gt;price=htmlspecialchars(strip_tags($this-&gt;price));
  
          // bind values
          $stmt-&gt;bindParam(":name", $this-&gt;name);
          $stmt-&gt;bindParam(":description", $this-&gt;description);
          $stmt-&gt;bindParam(":category_id", $this-&gt;category);
          $stmt-&gt;bindParam(":created", $this-&gt;image);
          $stmt-&gt;bindParam(":price", $this-&gt;price);
  
          // execute query
          if($stmt-&gt;execute()){
              return true;
          }
  
          return false;
  
      }
  }
  </code></pre>
  
  <p>The error it gives me in chrome:</p>
  
  <blockquote>
    <p>zone.js:3243 OPTIONS <a href="http://localhost/petrapharm-backend/create.php" rel="nofollow noreferrer">http://localhost/petrapharm-backend/create.php</a> 400 (Bad Request)</p>
    
    <blockquote>
      <p>Access to XMLHttpRequest at '<a href="http://localhost/petrapharm-backend/create.php" rel="nofollow noreferrer">http://localhost/petrapharm-backend/create.php</a>' from origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.</p>
    </blockquote>
  </blockquote>
  
  <p>I also tried running the POST request in Insomnia and Postman, but they return the following reposonse</p>
  
  <pre><code>{
      "message": "Unable to create product. Data is incomplete."
  }
  </code></pre>