Angular开发Ionic应用调用PHP接口偶现No 'Access-Control-Allow-Origin' CORS错误

• CORS配置冲突：现有配置同时存在Access-Control-Allow-Origin: *与动态反射$_SERVER['HTTP_ORIGIN']的逻辑，且开启了Access-Control-Allow-Credentials: true，而带凭据的请求不允许Origin设置为通配符*，不同请求场景下配置优先级不一致会导致头信息偶发缺失。
• 网络节点差异：不同地区的运营商缓存、CDN节点配置不同，若西班牙区域的节点未正确转发OPTIONS预检请求，或缓存了未携带CORS头的异常响应，就会出现地区性的偶发错误。
• 服务端逻辑提前终止：CORS头配置未放在入口文件最顶部，若请求触发业务异常、权限拦截等逻辑提前终止执行，返回的错误响应将缺失CORS头，浏览器会优先抛出CORS错误而非实际业务异常。
• 预检请求缓存失效：配置的Access-Control-Max-Age: 86400可能被部分浏览器或地区网络节点忽略，每次请求前都会发送OPTIONS预检，若预检请求被拦截或超时也会触发CORS错误。
• 重定向未配置CORS：若请求触发301/302跳转，跳转后的响应未携带CORS头，也会偶发报错。

服务端配置修复 #

首先统一CORS逻辑，删除冲突的通配符Origin配置，将CORS逻辑放在入口文件最顶部，同时添加Origin白名单避免安全风险，参考修正代码：

<?php 
// 入口文件最顶部优先处理CORS
$allowed_origins = [
    'http://localhost:8100',
    // 追加生产环境允许的域名
];
if (isset($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], $allowed_origins)) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 86400");
header("Content-Type: application/json");

// 处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    }
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    }
    exit(0);
}

网络配置优化 #

检查CDN、云服务商的地区节点配置，开启OPTIONS请求的转发规则，关闭CORS相关的自动缓存策略，避免节点缓存未携带CORS头的响应。

前端兼容方案 #

• 开发阶段可使用Angular代理转发请求，在angular.json中配置代理规则将API请求转发到PHP服务端，规避本地开发的跨域问题。
• 生产端打包为APP时，可使用Ionic原生HTTP插件发送请求，原生请求不会触发浏览器CORS策略，从根源避免跨域问题。

排查手段 #

报错时抓取请求的响应头，确认是OPTIONS预检请求未返回正确头信息，还是POST请求本身的响应头缺失，可快速定位是配置问题还是网络链路问题。

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