Angular 2对接CodeIgniter API请求失败，跨域Header报错求助

这个错误是典型的CORS（跨域资源共享）预检失败问题：当你的Angular前端发送POST请求时，默认会带上Content-Type: application/json请求头，浏览器会先发起一个OPTIONS预检请求，检查后端是否允许这个头。而你的CodeIgniter后端目前只声明允许X-Requested-With，所以预检不通过，请求被浏览器拦截了。

具体修复方案： #

1. 更新CodeIgniter的跨域响应头并处理OPTIONS请求

修改你的API处理函数，把Content-Type加入允许的请求头列表，同时专门处理OPTIONS预检请求（直接返回204状态码即可）：

public function index() {
    // 优先处理OPTIONS预检请求，避免后续逻辑执行
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        header("HTTP/1.1 204 No Content");
        exit();
    }

    // 更新跨域允许的请求头，添加Content-Type
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

    // 注意：Angular默认发送JSON格式数据，不能用$this->input->post()获取
    $requestData = json_decode(file_get_contents('php://input'), true);
    print_r($requestData);
}

2. 为什么要修改数据获取方式？

Angular的http.post默认发送的是JSON格式的请求体，而CodeIgniter的$this->input->post()只能解析application/x-www-form-urlencoded或multipart/form-data格式的表单数据，所以需要用file_get_contents('php://input')读取原始请求体，再解码成JSON数组。

3. 可选优化：全局配置跨域头

如果你的API有多个接口，不想每个方法重复写跨域头，可以把配置放在控制器的构造函数里：

public function __construct() {
    parent::__construct();
    
    // 全局设置跨域头
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

    // 全局处理OPTIONS请求
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        header("HTTP/1.1 204 No Content");
        exit();
    }
}

这样所有接口都会自动应用跨域配置，不用重复编写。

修改完成后重新测试，你的Angular请求应该就能正常通过CORS预检，成功和后端交互了。

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