无法使用 php mail() 角度发送邮件

Question

经过多次搜索，我的问题仍然存在。 我是 Angular 新手，我在验证联系表格后尝试在我的个人地址发送邮件。

提交后我没有邮件，但是如果我复制并通过服务器中的文件 mail.php 并且我 ping 我有一封带有默认值的邮件。

当我使用邮递员应用程序时，我的 mail.php 中有回显

我需要你的帮助

这里是我的contact.component.ts

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

@Component({
  selector: 'contact',
  templateUrl: './contact.component.html',
  styles:['input.ng-invalid {border-left: 5px solid red;}',
    'input.ng-valid {border-left:5px solid green;}',
    'input.ng-pristine {border-left: 1px solid grey;}',
    'textarea.ng-invalid {border-left: 5px solid red;}',
      'textarea.ng-valid {border-left:5px solid green;}',
      'textarea.ng-pristine {border-left: 1px solid grey;}']
  // styleUrls: ['../../app.component.css']
})
export class ContactComponent implements OnInit {

    name: string;
    email: string;
    message: string;
    endpoint : string;

    http : Http;

    constructor(http : Http) {
        this.http = http;
    }

    userForm = new FormGroup({
        nom: new FormControl(null),
        prenom: new FormControl(null),
        email: new FormControl(null),
        telephone: new FormControl(null),
        message: new FormControl(null)
    });

    onSubmit(){
        console.log(this.userForm.value);
        let postVars = {
          email : this.email,
          name : this.name,
          message : this.message
        };
            this.endpoint = "http://localhost:8000/src/app/page/contact/mail.php";
        this.http.post(this.endpoint, postVars)
        .subscribe(
            response => console.log(response),
            response => console.log(response)
        )
    }

    ngOnInit() {
    //This data could really come from some inputs on the interface - but let's keep it simple.
    this.email = "mypersonaladress@gmail.com";
    this.name = "Hayden Pierce";
    this.message = "Hello, this is Hayden.";

        //Start php via the built in server: $ php -S localhost:8000
            this.endpoint = "http://localhost:8000/src/app/page/contact/mail.php";
    }


}

这里是我的contact.component.html

<main>
    <div class="container">
        <div class="row">
            <p class="col-xs-12 text-center">Vous desirez discuter un moment?</p>
            <p class="col-xs-12 text-center">Vous etes sur au bon endroit ?</p>
        </div>
        <form [formGroup]="userForm" method="POST" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <label>Nom</label>
                <input type="text" name="nom" #refNom class="form-control" formControlName="nom">
                <b>{{refNom.className}}</b>
                <div class="alert alert-danger" *ngIf="userForm.controls['nom'].hasError('required') && ( userForm.controls['nom'].touched)">
                    Merci de rentrer un nom
                </div>
                <div class="alert alert-danger" *ngIf="userForm.controls['nom'].hasError('minlength')">
                    Il faut écrire un nom avec plus de deux characteres
                </div>
                <div class="alert alert-danger" *ngIf="userForm.controls['nom'].hasError('maxlength')">
                    Vous n'avez pas un diminutif?
                </div>
            </div>
            <div class="form-group">
                <label>Prenom</label>
                <input type="text" #refPrenom class="form-control" formControlName="prenom">
                <b>{{refPrenom.className}}</b>
                <div class="alert alert-danger" *ngIf="userForm.controls['prenom'].hasError('required') && ( userForm.controls['prenom'].touched)">
                    Merci de rentrer un prénom
                </div>
                <div class="alert alert-danger" *ngIf="userForm.controls['prenom'].hasError('minlength')">
                    Il faut écrire un prénom avec plus de deux characteres
                </div>
                <div class="alert alert-danger" *ngIf="userForm.controls['prenom'].hasError('maxlength')">
                    Vous n'avez pas un diminutif?
                </div>
            </div>
            <div class="form-group">
                <label>email</label>
                <input type="email" name="email" class="form-control" formControlName="email">
            </div>
            <div class="form-group">
                <label for="telephone">Telephone</label>
                <input type="text" class="form-control" formControlName="telephone">
            </div>
            <div class="form-group">
                <label for="message">Votre message</label>
                <textarea class="form-control" name="message" id="exampleTextarea" rows="3" formControlName="message"></textarea>
            </div>
            <button type="submit" [disabled]="!userForm.valid" class="btn btn-primary">Submit</button>
        </form>
    </div>
</main>

这里是我的 mail.php 文件

    <?php
$recipient = 'mypersonaladress@gmail.com\n';
$subject = 'new message\n';
$headers = "From: \n";
$message = '$params->message\n';
mail('mypersonaladress@gmail.com', 'mon sujet', 'coucou');

switch($_SERVER['REQUEST_METHOD']){
    case("OPTIONS"): //Allow preflighting to take place.
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: POST");
        header("Access-Control-Allow-Headers: content-type");
        exit;
    case("POST"): //Send the email;
        header("Access-Control-Allow-Origin: *");

        $json = file_get_contents('php://input');
        $params = json_decode($json);
        $email = $params->email;
        $name = $params->name;
        $message = '$params->message\n';

        $recipient = 'mypersonaladress@gmail.com\n';
        $subject = 'new message\n';
        $headers = "From: toto@toto.com\n";
        if(mail($recipient, $subject, $message, $headers)){
            echo'totooo';
        }
    //    mail($recipient, $subject, $message, $headers);
        break;
    default: //Reject any non POST or OPTIONS requests.
        header("Allow: POST", true, 405);
        exit;
}
?>

我在 bash for ng serve 上没有错误 并在 bash php -S 本地主机：8000 我可以看到 [2017 年 4 月 13 日星期四 14:41:37] 127.0.0.1:34118 [200]： /src/app/page/contact/mail.php

我不知道如何解决这个问题。

Answer 1

尝试使用URLSearchParams 设置url 参数并使用RequestOptions 并使用x-www-form-urlencoded 设置标题。我还注意到Http 的奇怪用法，删除在组件中声明http：http : Http;

并将您的构造函数更改为：

constructor(private http : Http) { }

但回到 POST 请求。导入以下内容：

import { RequestOptions, URLSearchParams, Headers } from '@angular/http';

你的onSubmit：

onSubmit(){
  let body = new URLSearchParams();
  body.set('email', this.email);
  body.set('name', this.name);
  body.set('message', this.message);

  let headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  let options = new RequestOptions({ headers: headers });

  this.endpoint = "http://localhost:8000/src/app/page/contact/mail.php";

    this.http.post(this.endpoint, body, options)
      .subscribe(
        response => console.log(response)
    )
}

希望这会有所帮助！此外，我建议您将所有 http 请求移至实际服务，这通常是这样做的方法；）