如何为 JQuery 和 Codeigniter 4 启用或允许 Access-Control-Allow-Origin

Question

我正在构建一个 API 来激活和验证我的 PHP 脚本的活动安装，但我收到 “从来源 'http://domain.te' 访问 'http://api.domain.te/requests/verify' 处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header “ 控制台错误。

这是我的 jQuery 代码：

function verify() { 
    $.post(url+"requests/verify", {
        domain: domain
    }, function(data) {
        if (data.success === true) {
            return true;
        }
    });
    return false;
}

我已经通读了类似的问题并尝试了所有建议，但 none 似乎有效。

在我的 PHP 代码中我有：

    public function verify()
    {    
        $data['success'] = false;
        $data['status']  = 'error';
        $data['message'] = 'An error occurred';  

        if ($this->actives_m->check($this->request->getPost("domain")??""))
        { 
            $data['success'] = true;
            $data['status']  = 'success';
            $data['message'] = 'Product is Active!';
        }
        else
        {
            $data['message'] = 'Product is Inactive!';
        }

        $this->response->setHeader('Access-Control-Allow-Origin', '*');
        $this->response->setHeader('Access-Control-Allow-Methods', 'GET, POST');
        return $this->response->setJSON($data);
    }

我也试过在 <?php 之后的脚本开头设置 headers 但仍然没有用。我还尝试了内置的 PHP header() 函数，如下所示：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');

我什至修改了我的 JS 看起来像：

function verify() { 
    $.ajax({
        url: url+"requests/verify", 
        type: "POST",
        dataType: "JSON",
        data: {domain: domain}, 
        crossDomain: true,
        success: function(data) {
            if (data.success === true) {
                return true;
            }
        }
    });
    return false;
}

到目前为止似乎没有任何效果，我应该从这里去哪里？

更新： 我意识到如果我像这样使用 Pure Javascript：

    const xhr = new XMLHttpRequest();  
       
    xhr.open('GET', url+"requests/verify");
    xhr.onreadystatechange = function(data) {
        if (data.success === true) {
            return true;
        }
    }
    xhr.send();

它按预期工作，但我必须使用 jQuery 来保持我的代码统一，以供将来参考。

Answer 1

正如您已经做的那样，必须从接收服务器端接近 CORS，所以我将 headers 来自 .htaccess 放在 Apache 站点中（检查如何做如果你使用不同的服务器）：

Header set Access-Control-Allow-Origin "*" （在你的情况下，它应该是一个 * 如果可以是多个未知域）

Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept" （如果你也想的话，也可以是方法）

有关 header 的信息和选项： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

您可以使用 curl 查看您发送的 header 是什么，它们出现了吗？ curl -I http://api.domain.te/requests/verify

Answer 2

只要出现 cross-origin 问题，就会有两条路由被命中。假设在您的示例中，您有对“http://api.domain.te/requests/verify”的 GET 请求，因此在使用 GET 请求访问您的服务器之前，它将使用 OPTIONS 请求访问相同的 url。这将验证您的服务器是否允许 API 用于跨源请求。

因此在 CI4 路由中，您必须定义相同的 URL 或包含通配符以启用您的跨源请求。

这里，下面的例子是外卡请求。

$routes->options('(:any)', 'Controller/options');

此处此路由匹配任何具有 OPTIONS 方法的路由，并且有一个名为 Options 的方法来处理它。

这个选项方法可以定义如下：

public function options($any)
    {
        return $this->response->setHeader('Access-Control-Allow-Origin', '*') //for allow any domain, insecure
            ->setHeader('Access-Control-Allow-Headers', '*') //for allow any headers, insecure
            ->setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE') //method allowed
            ->setStatusCode(200); //status code
    }

这个方法本质上做的是让浏览器知道Cross-Origin的请求是允许的，状态为GET、POST、PUT和DELETE等方法。

浏览器命中此请求后，它将被定向到您的请求，该请求也应该启用如下跨源：

$this->response->setContentType('application/json')->setJSON($response)->send()->setHeader('Access-Control-Allow-Origin', '*');

参考：https://carminemilieni.it/2019/09/19/resolve-cors-and-corb-in-codeigniter-4/

如何为 JQuery 和 Codeigniter 4 启用或允许 Access-Control-Allow-Origin

How to enable or Allow Access-Control-Allow-Origin for JQuery and Codeigniter 4

php

api

jquery

cors

codeigniter-4