Vue用Axios发POST请求到CodeIgniter4后端出现CORS跨域问题如何解决？

1 先排查.htaccess未生效原因 #

你之前配置的htaccess规则缺了允许请求头的配置，且可能存在环境配置问题：

• 先确认Apache已开启mod_headers扩展：可以在Apache配置文件中查找LoadModule headers_module modules/mod_headers.so，确保该行没有被注释
• 确认站点虚拟主机配置中AllowOverride参数设置为All，否则htaccess规则不会被加载
• 补充完整htaccess的CORS配置，增加允许的请求头规则：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://localhost:8081"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
    Header set Access-Control-Allow-Headers "X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization"
    # 处理预检OPTIONS请求直接返回200
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

2 更稳妥的方案：使用CodeIgniter 4 过滤器处理CORS #

CI4官方更推荐用过滤器统一处理跨域，避免服务器配置差异导致的问题：

2.1 创建CORS过滤器 #

在app/Filters目录下新建Cors.php文件，写入以下代码：

<?php

namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class Cors implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        // 处理预检OPTIONS请求
        if ($request->getMethod() === 'options') {
            $response = service('response');
            $response->setHeader('Access-Control-Allow-Origin', 'http://localhost:8081')
                     ->setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE')
                     ->setHeader('Access-Control-Allow-Headers', 'X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization')
                     ->setStatusCode(200);
            return $response;
        }
    }

    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // 给所有响应加跨域头
        $response->setHeader('Access-Control-Allow-Origin', 'http://localhost:8081')
                 ->setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE')
                 ->setHeader('Access-Control-Allow-Headers', 'X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization');
        return $response;
    }
}

2.2 注册并启用过滤器 #

打开app/Config/Filters.php文件：

1. 先在$aliases数组中添加过滤器别名：

public $aliases = [
    // 原有其他别名保留
    'cors' => \App\Filters\Cors::class,
];

2. 再将过滤器设置为全局生效，或者仅绑定到API路由组：

// 全局生效配置
public $globals = [
    'before' => [
        // 原有其他配置保留
        'cors'
    ],
    'after' => [
        // 原有其他配置保留
        'cors'
    ]
];

如果仅需要给API接口加跨域，可以不配置全局，在app/Config/Routes.php中给API路由组单独挂载：

$routes->group('admin', ['filter' => 'cors'], function($routes) {
    $routes->post('users/create', 'Users::create');
    // 其他admin接口都放这里
});

注意事项 #

• 生产环境请严格控制Access-Control-Allow-Origin的允许域名，不要使用*避免安全风险
• 如果你用的是CI4的开发内置服务（php spark serve启动），htaccess规则不生效，必须用过滤器方案

内容的提问来源于stack exchange，提问作者Lidia K.