代码之家  ›  专栏  ›  技术社区  ›  3m1n3nc3

如何为JQuery和Codeigniter 4启用或允许访问控制允许源

  •  0
  • 3m1n3nc3  · 技术社区  · 4 年前

    我正在构建一个API来激活和验证我的PHP脚本的活动安装, 但我明白了 “在'访问XMLHttpRequesthttp://api.domain.te/requests/verify“起源”http://domain.te'已被CORS策略阻止:请求的资源上不存在“Access Control Allow Origin”标头 控制台出错。

    以下是我的jQuery代码:

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

    我已经通读了类似的问题,并尝试了所有的建议,但似乎都没有奏效。

    在我的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 但仍然不起作用。 我还尝试了内置的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;
    }
    

    到目前为止,一切似乎都不起作用,我该从这里去哪里?

    更新: 我意识到,如果我像这样使用纯Javascript:

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

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

    0 回复  |  直到 4 年前
        1
  •  1
  •   Dhaval Chheda    4 年前

    每当出现跨起点问题时,都会有两条路线受到影响。假设在您的示例中,您有GET请求“http://api.domain.te/requests/verify“,因此,在使用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
        }
    

    此方法的本质是让浏览器知道允许跨源请求,状态为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/

        2
  •  0
  •   Ramon Forns    4 年前

    正如您已经做的那样,必须从接收服务器端访问CORS,所以我从 .htaccess 在Apache站点中(如果使用不同的服务器,请检查如何操作):

    Header set Access-Control-Allow-Origin "*" (在您的情况下,它应该是一个*if,可以是多个未知域)

    Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept" (如果你愿意,也可以选择方法)

    该标题上的信息和选项: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

    您可以使用curl检查您发送的标题,它们会出现吗? curl -I http://api.domain.te/requests/verify