Ionic+Angular对接Codeigniter4生产环境CORS报错求助

一、用Codeigniter4内置CORS中间件（优先方案） #

CI4自带的CORS处理比.htaccess更可靠，能避免服务器配置冲突：

1. 启用CORS中间件：编辑app/Config/Filters.php，将cors加入$globals的before数组：

public $globals = [
    'before' => [
        // 保留原有中间件，添加下面一行
        'cors',
    ],
];

2. 配置允许的来源：编辑app/Config/Cors.php，设置前端生产域名：

public $allowedOrigins = ['https://你的Ionic前端域名.com'];
public $allowedMethods = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'];
public $allowedHeaders = ['Content-Type', 'Authorization'];
public $maxAge = 86400;

注意：OPTIONS预检请求会被CI4自动处理，无需在控制器中额外编写逻辑。

二、修正.htaccess的CORS配置 #

如果坚持用.htaccess，确保配置覆盖所有请求类型，尤其是OPTIONS预检请求：

# 处理OPTIONS预检请求，直接返回200
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

# 设置CORS响应头
Header always set Access-Control-Allow-Origin "https://你的Ionic前端域名.com"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization"

# 若需携带凭证（如Cookie），取消下面注释
# Header always set Access-Control-Allow-Credentials "true"

检查Hostinger是否启用mod_headers模块：可通过phpinfo()查看，或在Hostinger面板的PHP设置中确认。

三、前端请求代码排查 #

1. 确保请求地址为生产环境后端域名，而非本地localhost
2. 若携带自定义头部（如Authorization），需与后端允许的头部匹配
3. Angular HttpClient示例代码：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getBackendData() {
  const apiUrl = 'https://你的CI4后端域名.com/api/接口路径';
  return this.http.get(apiUrl, {
    headers: {
      'Content-Type': 'application/json',
      // 'Authorization': 'Bearer ' + token // 如有需要
    }
  });
}

若使用Ionic原生HTTP插件，需单独配置插件的CORS参数，避免与HttpClient混淆。

四、Hostinger服务器额外检查 #

1. 确认后端域名SSL证书有效：现代浏览器要求HTTPS跨域请求必须使用有效证书
2. 检查Hostinger防火墙/安全规则：是否拦截OPTIONS请求或特定请求头
3. 用curl测试预检请求：

curl -X OPTIONS -I https://你的CI4后端域名.com/api/接口路径

若返回头中无Access-Control-Allow-Origin，说明服务器端配置未生效。

五、控制器代码避坑 #

不要在CI4控制器中手动设置CORS头，避免与中间件/.htaccess冲突：

// 错误示例：不要这样写
public function index()
{
  header('Access-Control-Allow-Origin: *');
  // ...业务逻辑
}

控制器只需处理业务逻辑，CORS交给中间件或服务器配置统一处理。

内容的提问来源于stack exchange，提问作者Axley Herrera Vazquez