Angular 5本地调用sendmail.php遇404错误，求解决方案

首先直接给你结论：Angular CLI的开发服务器（ng serve）是无法运行或解析PHP脚本的，这才是你遇到404错误的核心原因，路径问题只是表象。

为什么ng serve找不到PHP脚本？ #

Angular CLI的开发服务器本质上是一个静态文件服务器，它只负责编译你的Angular前端代码，把src目录下的前端资源（HTML、CSS、TS等）编译后提供给浏览器，但它完全不具备处理PHP这类后端脚本的能力。而且你把sendmail.php放在src/app/contact目录下，这个目录属于前端源码目录，ng serve编译后并不会把PHP文件复制到服务器的静态资源目录里，所以浏览器请求http://localhost:4200/contact/sendmail.php时，自然会返回404。

为什么用Wamp能成功？ #

Wamp Server是一个完整的PHP运行环境（包含Apache服务器+PHP解析器），它能识别并执行PHP脚本。你通过给form添加action="sendmail.php"直接提交表单，这时候是Wamp的Apache服务器在处理这个请求，它能找到部署在服务器目录下的sendmail.php并执行，所以能成功。

至于你提到的样式失效，大概率是Angular编译后的资源路径配置问题：

• 部署Angular项目到Wamp时，需要确保编译时设置了正确的base-href，比如执行ng build --prod --base-href ./，这样Angular会用相对路径加载CSS、JS等资源，避免路径错误导致样式无法加载。

解决方案：开发和部署阶段的正确做法 #

1. 开发阶段：用代理转发请求到PHP服务器 #

如果你想在本地用ng serve开发前端，同时让PHP脚本正常工作，可以通过Angular的代理配置把PHP请求转发到Wamp服务器：

• 在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/api/*": {
    "target": "http://localhost",
    "secure": false,
    "changeOrigin": true
  }
}

• 把你的sendmail.php放到Wamp的www/api目录下（或者对应你配置的路径）
• 修改SendMailService里的请求路径：

performGetEx():Observable<any> {
  return this.http.get<any>('/api/sendmail.php');
}

• 启动Angular开发服务器时加上代理配置：

ng serve --proxy-config proxy.conf.json

这样前端的请求会被转发到Wamp的PHP服务器，就能正常执行脚本了。

2. 部署阶段：正确放置文件并配置base href #

• 先编译Angular项目：

ng build --prod --base-href ./

• 把dist目录下的所有文件复制到Wamp的www目录（或者子目录）
• 把sendmail.php放到和Angular静态文件同级的目录下（或者根据你的form action路径调整）
• 访问Wamp的服务器地址（比如http://localhost），就能正常使用表单提交功能，样式也不会失效。

额外提醒 #

不要把PHP脚本放在Angular的src目录下，这个目录是前端源码的专属目录，编译后不会保留非前端类型的文件，应该把PHP脚本放在后端服务器的根目录下，和前端静态资源分开管理。

内容的提问来源于stack exchange，提问作者Y.Uzumaki