如何解决Angular2与PHP数据交互时的跨源请求阻止问题

你遇到的是典型的**跨域资源共享（CORS）**问题——你的Angular开发服务器默认运行在http://localhost:4200，而XAMPP的Apache服务器通常是http://localhost:80，不同端口属于不同的源，浏览器的同源策略会直接阻止这类跨域请求。下面给你几个分场景的实用解决方法：

方法1：开发环境用Angular代理转发（最推荐） #

这个方法不需要修改任何PHP代码，只通过配置Angular的代理，让开发服务器自动把请求转发到Apache地址：

1. 在你的Angular项目根目录（也就是/var/www/html/angproject/）新建一个proxy.conf.json文件，内容如下：

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

举个例子：你原来要请求http://localhost/phpscript/login.php，现在只需要写成/api/login.php，代理会自动帮你转发到目标地址。

2. 打开angular.json文件，找到projects -> 你的项目名 -> architect -> serve -> options，添加代理配置：

"options": {
  "browserTarget": "你的项目名:build",
  "proxyConfig": "proxy.conf.json"
}

记得把你的项目名替换成你实际的Angular项目名称。

3. 重启Angular开发服务器，之后所有带/api前缀的请求都会被转发到Apache，不会再触发CORS错误。

方法2：在PHP文件中添加CORS响应头 #

如果不想用代理，可以直接在PHP脚本的最开头添加允许跨域的头信息，让浏览器放行请求：

打开/var/www/html/phpscript/login.php，在最顶部插入以下代码：

<?php
// 允许Angular开发服务器的源发起请求
header("Access-Control-Allow-Origin: http://localhost:4200");
// 允许的请求方法（根据你的需求调整）
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 允许的请求头（比如Content-Type是POST请求常用的）
header("Access-Control-Allow-Headers: Content-Type");

// 处理浏览器的预请求（OPTIONS方法）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

// 下面是你原有的PHP业务代码

如果是测试环境想允许所有源（不推荐生产环境使用），可以把Access-Control-Allow-Origin的值改成*。

方法3：将Angular构建产物部署到Apache目录（生产环境适用） #

当你准备上线项目时，把Angular编译后的静态文件放到Apache的目录下，让Angular和PHP处于同一个源：

1. 在Angular项目根目录运行构建命令：

ng build --prod

构建完成后会生成dist/目录，里面是编译好的静态资源文件。

2. 把dist/里的所有文件复制到/var/www/html/下（比如可以新建一个angular-dist目录存放），然后通过Apache的地址访问（比如http://localhost/angular-dist），此时请求PHP脚本就完全不存在跨域问题了。

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