使用本地 php 脚本作为我的 Angular 应用程序的邮件程序时遇到问题

Question

实际上我这里有两个问题。

我的服务内容如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class EmailService {

 private emailUrl = 'http://localhost/grandmascookieshoppe-ng/src/services/email-form.php'; 

  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);
  }
}

我的第一个问题是我不能真正保留本地主机 URL，因为我将上传到真实的站点。我需要一种通用方法来引用该文件。然而，除了完整的 URL 之外的任何内容都会生成 404。我想我可以通过使 URL 的第一部分由一对变量控制来解决这个问题，当我实时发送它时，我会交换这对变量。但我希望有一个更优雅的解决方案。

第二个问题是，即使这样，在找到文件的地方，即使我将其添加到标头中，我也会收到 CORS 错误：

...
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
'Access-Control-Allow-Origin: *';
@mail($email_to, $email_subject, $email_message, $headers);  
?>
...

我不知道这是否只是因为它是

localhost

还是什么，但我会很感激任何意见。

谢谢你。

Answer 1

您可以使用 Angular 的环境配置来处理不同的 URL 以进行开发和生产，而不是在 Angular 服务中对 URL 进行硬编码。

环境.ts

export const environment = {
  production: false,
  emailUrl: 'http://localhost/grandmascookieshoppe-ng/src/services/email-form.php'
};

环境.prod.ts

export const environment = {
  production: true,
  emailUrl: 'https://yourproductiondomain.com/path/to/email-form.php'
};

CORS 错误通常是因为浏览器强制执行同源策略而发生，该策略会阻止对不同域或端口的请求，除非服务器允许。

在 PHP 脚本的开头添加 CORS 标头：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

$email_from = '[email protected]';
$email_to = '[email protected]';
$email_subject = 'Subject';
$email_message = 'Message body';
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();

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