отправка данных поля ввода в php скрипт в angular 4

Question

Я пытаюсь создать угловое приложение, и я довольно плохо знаком с этой технологией. Я успешно смог получить значения из поля ввода и просмотреть их в консоли, но я хочу взять эти значения и отправить их в сценарий php, где может быть выполнена внутренняя обработка. В основном это простая функция почты. Ниже приведены мои коды.

Мой файл backend.php

<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

  @$rand = $_POST['rand'];
    @$captcha = $_POST['captcha'];
    @$email = $_POST['email'];
    @$msg = $_POST['msg'];
    @$to = "contact@ixoraa.in";
  @$subject = $_POST['name'];   
    @$headers = "From:" . $email . "\r\n";
  @$header .= "MIME-Version: 1.0\r\n";
    @$header .= "Content-type: text/html\r\n";
if($rand == $captcha)
{

    $retval =mail($to, $subject, $msg, $headers);



if( $retval == true )  

{

echo '<script type="text/javascript">'; 

echo 'alert("Thanks for your feedback. We will reply back soon.")'; 
echo '</script>';

echo '<meta http-equiv="refresh" 
content="0;url=http://www.ixoraa.in/new">';

}

else
{

echo '<script type="text/javascript">'; 

echo 'alert("Not sent !!!")'; 

   echo '</script>';
}
   }

        else{

echo '<script type="text/javascript">'; 

echo 'alert("Captcha does not match")'; 

   echo '</script>';
        }


?>

А вот и мой component.html

<form class="" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
            <div class="form-group has-feedback">
                <input  name="name" type="text" formControlName='name' class="form-control" placeholder="Name" style="background-color: rgba(60, 144, 155, 0.10); color: white;"/>
                <i class="glyphicon glyphicon-user form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
           <div class="form-group has-feedback">
                <input  name="email" formControlName='email' type="text" class="form-control" placeholder="Email" style="background-color: rgba(60, 144, 155, 0.10); color: white;" />
                <i class="glyphicon glyphicon-send form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
           <div class="form-group has-feedback">
               <textarea  name="msg" formControlName='msg' type="text" rows="5" class="form-control" placeholder="Message" style="background-color: rgba(60, 144, 155, 0.10); color: white;"></textarea>
                <i class="glyphicon glyphicon-comment form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
           </div>
   <div style=" display: table; width: 100%; font-weight:600; font-size:25px;">
   <input name="rand" formControlName='rand'  class="text-center" style="background-color: antiquewhite; text-decoration: line-through;" size="3" type="text" value="{{randomNumber}}" readonly></div>
   <div class="form-group has-feedback">
        <input formControlName='captcha'  onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off name="captcha" id="captcha" type="text" class="form-control" placeholder="Enter Code Here" style="background-color: rgba(60, 144, 155, 0.10); color: white;" />
        <i class="glyphicon glyphicon-pencil form-control-feedback" style="color: rgba(255, 255, 255, 0.9)"></i>
   </div>
   <input style="padding-left: 20px; font-weight: 600; padding-right: 20px; background-color: #00aee7;margin-bottom: 40px; color: white;" type="submit" name="submit" value="Send" class="btn">
</form>

и вот мой файл component.ts

import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/http';
import {FormGroup, FormControl, FormControlName} from '@angular/forms';

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

  form;

  randomNumber;
  constructor(private http: Http) {
    this.randomNumber = Math.floor((Math.random() * 10000) + 1);

  }

  onSubmit = function(user) {
      console.log(user);
      this.http.post('http://localhost/ixoraa/backend.php', user).subscribe();

  };

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(),
      email: new FormControl(),
      msg: new FormControl(),
      captcha: new FormControl(),
      rand: new FormControl(this.randomNumber)
    });
  }

}

спасибо заранее !!!

Answer 1

Я полагаю, что ваша проблема может быть связана с CORS: вы, вероятно, запускаете ваше угловое приложение с конфигурацией по умолчанию, что означает, что оно будет размещено на localhost:4200, в то время как ваш запрос http post отправляется на localhost:80, что не является того же происхождения, что и ваша заявка.

Вот хорошая статья о CORS: Статья совместного использования ресурсов из разных источников

И здесь - хороший ответ, объясняющий, как с ними бороться.