CORS Issue with Codeigniter v4.1.3

Hello,

I have been facing a CORS issue with version 4.1.3 I have almost opened every page on google to fix the issue.

I have an Angular app as frontend and backend in Codeigniter as REST API. The API working fine with Postman (HTTP client) but from the angular app, it always gives me CORS Error:







I have used PHP header() function in Controller, Filter but it doesn't work, also I have set the headers in .htaccess but still no result. If you see above its 404 on OPTIONS, don't get it why

Below is my code:

Added below in .htaccess:
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Max-Age 3600
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method"
    Header set Access-Control-Allow-Credentials true
</IfModule>

Custom CorsFilter before function:
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 3600");
$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
     die();
}

Custom CorsFilter after function:
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 3600");

app\Config\Filters.php changes:
    public $globals = [
        'before' => [
            'cors',
            'csrf',
        ],
    ];

    public $filters = [
    ];

Did anyone face that issue? Please help me.

This is the CORS Code in my .htaccess in the public folder with index.php

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|ico|font.css|css|js)$">
            ## un-remark this one for all access and remark out the one below it
            #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>

# Remove index.php from URL
RewriteCond %{HTTP:X-Requested-With}    !^XMLHttpRequest$
RewriteCond %{THE_REQUEST}              ^[^/]*/index\.php [NC]
RewriteRule ^index\.php(.*)$            $1 [R=301,NS,L]

Try mine.

Your missing the url code, you should not use the * on a live web site..

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

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

This is the CORS Code in my .htaccess in the public folder with index.php

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|ico|font.css|css|js)$">
            ## un-remark this one for all access and remark out the one below it
            #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>

# Remove index.php from URL
RewriteCond %{HTTP:X-Requested-With}    !^XMLHttpRequest$
RewriteCond %{THE_REQUEST}              ^[^/]*/index\.php [NC]
RewriteRule ^index\.php(.*)$            $1 [R=301,NS,L]

Try mine.

Your missing the url code, you should not use the * on a live web site..

Thanks for your .htaccess file I have just tried your file and still the same issue. This is what I'm getting local, I never went to live yet, mine is below

Code:

# Disable directory browsing
Options All -Indexes

# ----------------------------------------------------------------------
# Rewrite engine
# ----------------------------------------------------------------------

# Turning on the rewrite engine is necessary for the following rules and features.
# FollowSymLinks must be enabled for this to work.
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On

# If you installed CodeIgniter in a subfolder, you will need to
# change the following line to match the subfolder you need.
# http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
# RewriteBase /

# Redirect Trailing Slashes...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

# Rewrite "www.example.com -> example.com"
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

# Checks to see if the user is attempting to access a valid file,
# such as an image or css document, if this isn't true it sends the
# request to the front controller, index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([\s\S]*)$ index.php/$1 [L,NC,QSA]

# Ensure Authorization header is passed along
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>

<IfModule !mod_rewrite.c>
# If we don't have mod_rewrite installed, all 404's
# can be sent to index.php, and everything works as normal.
ErrorDocument 404 index.php
</IfModule>


<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Max-Age 3600
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT"
Header set Access-Control-Allow-Headers "X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method"
Header set Access-Control-Allow-Credentials true
</IfModule>

# Disable server signature start
ServerSignature Off
# Disable server signature end

100% works on live and local 

PHP Code:

<?php namespace Modules\Common\Filters;

use CodeIgniter\config\Services;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\Response;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;


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


    }

    public function before(RequestInterface $request, $arguments = null)
    {



        if (array_key_exists('HTTP_ORIGIN', $_SERVER)) {
            $origin = $_SERVER['HTTP_ORIGIN'];
        } else if (array_key_exists('HTTP_REFERER', $_SERVER)) {
            $origin = $_SERVER['HTTP_REFERER'];
        } else {
            $origin = $_SERVER['REMOTE_ADDR'];
        }
        $allowed_domains = array(
            'http://localhost:4200',
            'https://exmple.com',
            'https://www.exmple.com',
        );


        if (in_array($origin, $allowed_domains)) {
            header('Access-Control-Allow-Origin: ' . $origin);
        }

        header("Access-Control-Allow-Headers: Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token");
        header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Max-Age: 3600");
        header('content-type: application/json; charset=utf-8');
        $method = $_SERVER['REQUEST_METHOD'];
        if ($method == "OPTIONS") {
            header("HTTP/1.1 200 OK CORS");
            die();
        }

    }


} 


host

Enlightenment  Is  Freedom

i had the same problem. it was working on apps like postman but throws cors error on my vue app. then i realized, it's only throws cors error when i don't return $this->respond function on controller. If u echo or print any data and cut the function with die or exit without returning $this->respond() function, throws cors error.