无法使用 php mail() angular 发送邮件
Can't send mail with php mail() angular
经过多次搜索,我的问题仍然存在。
我是 angular 的新手,我尝试在验证联系表后用我的个人地址发送邮件。
提交后我没有邮件,但是如果我在我的服务器中复制并粘贴文件 mail.php 并且我 ping 进来,我有一封具有默认值的邮件。
当我使用 postman 应用时,我的 mail.php
中有 return 回声
我需要你的帮助
这是我的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;
}
?>
我在 ng serve 的 bash 上没有错误
在 bash php -S
localhost:8000
我可以看到
[2017 年 4 月 13 日星期四 14:41:37] 127.0.0.1:34118 [200]:
/src/app/page/contact/mail.php
我不知道如何解决这个问题。
尝试将 url 参数设置为 URLSearchParams
,并使用 RequestOptions
,将 headers 设置为 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 请求移至实际服务,这通常是这样做的方式 ;)
经过多次搜索,我的问题仍然存在。 我是 angular 的新手,我尝试在验证联系表后用我的个人地址发送邮件。
提交后我没有邮件,但是如果我在我的服务器中复制并粘贴文件 mail.php 并且我 ping 进来,我有一封具有默认值的邮件。
当我使用 postman 应用时,我的 mail.php
中有 return 回声我需要你的帮助
这是我的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;
}
?>
我在 ng serve 的 bash 上没有错误 在 bash php -S localhost:8000 我可以看到 [2017 年 4 月 13 日星期四 14:41:37] 127.0.0.1:34118 [200]: /src/app/page/contact/mail.php
我不知道如何解决这个问题。
尝试将 url 参数设置为 URLSearchParams
,并使用 RequestOptions
,将 headers 设置为 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 请求移至实际服务,这通常是这样做的方式 ;)