Angular中如何在component.ts内正确引用根目录下的PHP文件链接

问题核心原因 #

你遇到的报错本质是两个底层逻辑冲突：

1. ng serve启动的Angular本地开发服务器（默认端口4200）仅用于托管Angular编译后的前端静态资源，既不支持解析PHP脚本，也不会直接将项目根目录下的test.php映射为可访问的公共资源
2. PHP是服务端脚本，必须运行在支持PHP解析的服务环境（如XAMPP、WAMP、Nginx+PHP-FPM等）中，无法直接通过前端静态服务器调用

解决步骤 #

• 第一步：部署PHP文件到对应运行环境
  将test.php移动到PHP环境的站点根目录，例如使用XAMPP就放到其自带的htdocs目录下，启动Apache服务后先在浏览器直接访问http://localhost/test.php（如果自定义了PHP服务端口，对应替换端口即可），确认文件可以正常访问、没有服务端报错。
• 第二步：调整Angular中的请求地址
  将请求路径替换为PHP文件的实际可访问地址，示例代码：

  this.http.post("http://localhost/test.php", email).subscribe();
  

• 第三步：解决跨域问题
  本地开发时Angular运行在4200端口、PHP服务运行在其他端口，属于跨域请求，二选一配置即可：
  • 方式1：在test.php文件最开头添加跨域头配置：

    <?php
    header("Access-Control-Allow-Origin: http://localhost:4200");
    header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type");
    // 后续写你的业务逻辑代码
    ?>
    

  • 方式2：配置Angular开发代理（更推荐，上线无需改请求路径）
    在Angular项目根目录新建proxy.conf.json文件，填入以下内容：

    {
      "/api": {
        "target": "http://localhost",
        "secure": false,
        "pathRewrite": {
          "^/api": ""
        }
      }
    }
    

    修改package.json中的启动命令，将ng serve替换为ng serve --proxy-config proxy.conf.json，重启项目后请求可直接写为：

    this.http.post("/api/test.php", email).subscribe();
    

上线部署注意事项 #

正式上线时，将Angular执行ng build后生成的dist目录下所有静态文件，和test.php一起放到PHP站点的根目录下，此时直接用相对路径this.http.post("test.php", email).subscribe()即可正常访问，无需配置跨域。

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