Vue.js向CodeIgniter 3后端发送GET请求遇CORS拦截问题求助

看起来你遇到的核心问题是：你在CI3控制器中添加的CORS头部并没有实际出现在响应里（从你提供的响应头信息里完全看不到Access-Control-Allow-Origin这类字段），再加上浏览器的跨域预检请求没被正确处理，才导致了这个报错。结合你的情况，我给你一步步梳理解决方案：

1. 优先处理浏览器的OPTIONS预检请求 #

跨域场景下，浏览器在发送实际的GET请求前，会先发送一个OPTIONS预检请求，用来确认服务器是否允许跨域操作。CI3默认不会处理OPTIONS请求，这会直接导致预检失败，触发CORS错误。

你需要在CI3的控制器方法最开头，先判断并处理OPTIONS请求：

public function your_api_function() {
    // 先处理OPTIONS预检请求
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
        exit; // 直接返回，不执行后续业务逻辑
    }

    // 再处理正常的GET请求，同时带上CORS头部
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

    // 你的业务逻辑代码
    $query_param = $this->input->get('q');
    // 注意返回JSON格式，避免返回HTML（你的响应头里Content-Type是text/html，这也有问题）
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode(['data' => '你的返回内容']));
}

2. 排查CI3中的重定向问题 #

从你提供的响应头里看到了Location字段，这说明你的请求被重定向了！而重定向后的页面/接口并没有设置CORS头部，自然会报错。

检查你的控制器里是否调用了redirect()函数，或者CI3的路由规则是否导致了请求跳转。如果不是业务必需的重定向，直接去掉；如果必须重定向，要确保重定向后的目标地址也配置了CORS头部。

3. 确保CORS头部在所有输出前发送 #

CI3中，如果你的控制器里有任何输出（比如echo、加载视图、错误提示），之后再设置header()是无效的——HTTP头部必须在页面内容输出前发送。所以一定要把CORS头部的代码放在控制器方法的最开头，确保它是第一个执行的逻辑。

4. Vue端的小调整（非必需，但更健壮） #

从你的请求头来看，没有自定义的特殊头部，所以Vue端不需要额外添加请求头。不过可以给请求加上错误捕获，方便排查问题：

if (queryString !== '') {
    this.$http.get('LINK_HERE', { params: { q: queryString } })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.error('请求出错详情:', error); // 捕获错误，看更详细的信息
        });
}

5. 可选：Apache服务器层面配置CORS #

如果上面的方法还是没解决，可以尝试在项目的.htaccess文件中添加CORS规则（前提是Apache启用了mod_headers模块）：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PATCH, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Origin, Content-Type, X-Auth-Token"

# 处理OPTIONS请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

按照这个流程排查，应该就能解决你的CORS问题了。

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