Angular应用使用本地PHP邮件发送脚本遇到的两类问题

1. 优雅配置跨环境API路径 #

不要硬编码localhost地址，利用Angular的环境配置文件实现本地/生产环境自动切换：

• 在src/environments/environment.ts（本地开发环境）中添加配置：

  export const environment = {
    production: false,
    emailApiUrl: '/api/email-form.php'
  };
  

• 在src/environments/environment.prod.ts（生产环境）中添加配置：

  export const environment = {
    production: true,
    emailApiUrl: '/services/email-form.php' // 生产环境对应实际路径
  };
  

• 修改EmailService代码，导入环境变量：

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { environment } from '../environments/environment';
  
  @Injectable({
    providedIn: 'root'
  })
  export class EmailService {
  
    private emailUrl = environment.emailApiUrl; 
  
    constructor(private http: HttpClient) { }
  
    sendEmail(name: string, email: string, phone: string, message: string) {
      const data = {
        name: name,
        email: email,
        phone: phone,
        message: message
      };
      return this.http.post(this.emailUrl, data);
    }
  }
  

如果本地开发出现404，可配置Angular代理文件proxy.conf.json转发请求：

{
  "/api/*": {
    "target": "http://localhost",
    "secure": false,
    "pathRewrite": {"^/api": "/grandmascookieshoppe-ng/src/services"}
  }
}

启动项目时加上代理参数：ng serve --proxy-config proxy.conf.json

2. 修复CORS错误 #

你错误地把CORS响应头加到了邮件发送的头信息里，CORS头属于HTTP响应范畴，必须在PHP脚本最开头用header()函数设置：
修改PHP代码如下：

<?php
// 必须在任何输出前设置CORS响应头
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

// 后续邮件逻辑
$email_to = '你的收件邮箱地址';
$email_subject = '网站留言';

// 输入验证函数
function died($error) {
    echo $error;
    die();
}

// 获取POST参数
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$phone = $_POST['phone'] ?? '';
$message = $_POST['message'] ?? '';

// 组装邮件内容
$email_message = "姓名: $name\n";
$email_message .= "邮箱: $email\n";
$email_message .= "电话: $phone\n";
$email_message .= "留言: $message\n";

// 邮件发送头（仅用于邮件本身）
$headers = 'From: '.$email."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);  
?>

注意：

• header()函数必须放在PHP脚本最开始，不能有任何HTML输出、空格或注释在它之前
• 本地localhost环境的CORS报错，也可通过上述Angular代理配置避免跨域请求

内容的提问来源于stack exchange，提问作者Reverend Bubbles