Ci4 weird CORS issue

Hey Guys,

im still new to web development so please dont judge me

Ive been trying to create a RESTful API with Ci4 and the frontend is VueJs3.

The frontend has the url "beta.example.de" and the API is another subdomain "api.example.de"
This is my Filter:

PHP Code:

<?php namespace App\Filters;

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


class CORS implements FilterInterface
{
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {


    }

    public function before(RequestInterface $request, $arguments = null)
    {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: X-API-KEY, Origin,X-Requested-With, Content-Type, Accept, Access-Control-Requested-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PATCH, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if($method == "OPTIONS"){
            die();
        }
    }
} 


And this is my request:

Code:

const guest = axios.create({
        baseURL: "https://api.example.de/"
      });

      await guest.get('bitte/test').then(function(res) {
        console.log(res);
      })

If anyone could tell me what Im missing here it would be very much appreciated.

---

Nevermind guys...

In the Filters.php I simply wrote "

PHP Code:

'cors' => CORS::Class, 


".
Apparently I hat to specify the path as "

Code:

'cors' => \App\Filters\CORS::class,

"

Dont use the * on a live web site:

Code:

Header set Access-Control-Allow-Origin "*"

Code:

## .htaccess Control For CORS Configuration

# Add Font Awesome Font Types
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf        .ttf
AddType application/x-font-opentype  .otf
AddType application/font-woff        .woff
AddType application/font-woff2        .woff2

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|svg|svgz|jpg|png|wep|ico|font.css|css|js)$">
        ## un-remark this one for all access and remark out the one below it
        ## very un-secure!!!
        #Header set Access-Control-Allow-Origin "*"
        ## Change this to your local host url. and https or http
        Header add Access-Control-Allow-Origin: "https://yoursite.com"
        Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
        Header add Access-Control-Allow-Headers: "Upgrade-Insecure-Requests"
    </FilesMatch>
</IfModule>

See if that shows you whats wrong.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Dont use the * on a live web site:

Hi @InsiteFX , You're right, it's not correct to use * on a live website but do you have any experience for mobile apps? AFAIK they do not have any specific url/domain etc. How can we allow only for our mobile app?

App is not required by CORS, it is only for browsers. There is an exception when the app is a web client

[quote pid="411990" dateline="1692698256"]
Any non-conforming client (such as in a mobile app, or just a shell script invoking curl ),
can and usually will completely ignore CORS. Such clients don't have a Same-Origin Policy to begin with,
so there's nothing for CORS to make holes in and therefore it does nothing.

--------------------------------------------------------------------------------------------------------------------------------------------
[/quote]

Dont use the * on a live web site:

Hi @InsiteFX , You're right, it's not correct to use * on a live website but do you have any experience for mobile apps? AFAIK they do not have any specific url/domain etc. How can we allow only for our mobile app?

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

App is not required by CORS, it is only for browsers. There is an exception when the app is a web client

So you guys mean, I should write my own domain for the
 

Code:

Header set Access-Control-Allow-Origin "*"

  
part and just keep going on with the app?