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

Question

I'm building an API to activate and validate active installations of my PHP Scripts, but I get the "Access to XMLHttpRequest at 'http://api.domain.te/requests/verify' from origin 'http://domain.te' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" error on console.

Here is my jQuery code:

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

I have read through similar questions and tried all the suggestions, but none seems to be working.

On my PHP code I have:

    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);
    }

I have also tried setting the headers at the beginning of the script after <?php but still did not work. I also tried the built in PHP header() function like so:

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

I have even modified my JS to look like:

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;
}

So far nothing seems to be working, Where should I go from here?

UPDATE: I realize that if I use Pure Javascript like:

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

It works as expected, but I have to use jQuery to keep my code uniform, and for future reference.

Answer 1

Whenever, there is a cross-origin issue, there are two routes that are hit. Lets say in your example, you have GET request to "http://api.domain.te/requests/verify", So before hitting your server with GET request it will hit same url with OPTIONS request. This verifies whether your server allows the API for the Cross Origin Request.

So In CI4 routes you have to define same URL or include a wild card to enable your cross origin request.

Here, the following example is for wild card request.

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

Here this route matches any routes with OPTIONS method and a single method called Options is there to handle it.

This options method can be defined as follows :

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
    }

What this method essentially does is lets the browser know that request are allowed for Cross-Origin, with status Methods such as GET, POST, PUT and DELETE.

After browser hits this request, it will be directed to your request which should also have cross origin enabled as follow:

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

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