 |
Hi, a few days ago I finished an API and after testing it a little bit I published it for a coworker to test it from his terminal.
The issue is that having the API on a server and the html/javascript that consumes the API appeared the problem with CORS.
If I don't use authorization (Bearer {token}) everything works fine, when I add a filter for JWT it stops working.
From this I started to do the configurations indicated in https://codeigniter.com/user_guide/libraries/cors.html whitout success!
<Cors.php>
PHP Code: public array $api = [
'allowedOrigins' => ['http://localhost'],
'allowedOriginsPatterns' => [],
'supportsCredentials' => false,
'allowedHeaders' => ['Authorization', 'Content-Type'],
'exposedHeaders' => [],
'allowedMethods' => ['GET', 'POST', 'PATCH', 'PUT', 'DELETE'],
'maxAge' => 7200,
];
<Routes.php>
PHP Code: $routes->group('', ['filter' => ['cors:api']], static function (RouteCollection $routes): void {
$routes->resource('client', ['controller' => 'ClientController']);
$routes->options('client', static function () {});
$routes->options('client/(:any)', static function () {});
});
PHP Code: CodeIgniter v4.6.0 Command Line Tool - Server Time: 2025-03-27 18:20:17 UTC+00:00
+---------+------------------+------+----------------------------------------------+------------------+---------------+
| Method | Route | Name | Handler | Before Filters | After Filters |
+---------+------------------+------+----------------------------------------------+------------------+---------------+
| GET | client | » | \App\Controllers\ClientController::index | authjwt cors:api | cors:api |
| GET | client/new | » | \App\Controllers\ClientController::new | authjwt cors:api | cors:api |
| GET | client/(.*)/edit | » | \App\Controllers\ClientController::edit/$1 | authjwt cors:api | cors:api |
| GET | client/(.*) | » | \App\Controllers\ClientController::show/$1 | authjwt cors:api | cors:api |
| POST | client | » | \App\Controllers\ClientController::create | authjwt cors:api | cors:api |
| PATCH | client/(.*) | » | \App\Controllers\ClientController::update/$1 | authjwt cors:api | cors:api |
| PUT | client/(.*) | » | \App\Controllers\ClientController::update/$1 | authjwt cors:api | cors:api |
| DELETE | client/(.*) | » | \App\Controllers\ClientController::delete/$1 | authjwt cors:api | cors:api |
| OPTIONS | client | » | (Closure) | authjwt cors:api | cors:api |
| OPTIONS | client/(.*) | » | (Closure) | authjwt cors:api | cors:api |
+---------+------------------+------+----------------------------------------------+------------------+---------------+
Required After Filters: pagecache, performance, toolbar
Also try something like this:
PHP Code: $routes->group('', ['filter' => 'cors'], static function (RouteCollection $routes): void {
$routes->resource('client');
$routes->options('client', static function () {
// Implement processing for normal non-preflight OPTIONS requests,
// if necessary.
$response = response();
$response->setStatusCode(204);
$response->setHeader('Allow:', 'OPTIONS, GET, POST, PUT, PATCH, DELETE');
return $response;
});
$routes->options('client/(:any)', static function () {});
});
If I comment the line 'authjwt' => ['except' => ['/']], in Filters.php all works fine:
<Filters.php>
PHP Code: public array $globals = [
...
'authjwt' => ['except' => ['/']],
...
<AuthJwtFilter.php>
PHP Code: namespace App\Filters;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;
class AuthJWTFilter implements FilterInterface
{
public function before(RequestInterface $request, $arguments = null)
{
// Get the Authorization header
$authHeader = $request->getHeader('Authorization');
if (!$authHeader) {
return $this->unauthorizedResponse();
}
// Extract the token from the header
$token = str_replace('Bearer ', '', $authHeader->getValue());
// Validate the token (you can implement your own validation logic here)
if (!$this->isValidToken($token)) {
return $this->unauthorizedResponse();
}
}
public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
{
// Do something after the request is processed
}
private function isValidToken($token)
{
// Implement your token validation logic here
// For example, check against a database or decode a JWT
return $token === env('auth.JWT'); // Testing code, not the real one
}
private function unauthorizedResponse()
{
return service('response')
->setStatusCode(ResponseInterface::HTTP_UNAUTHORIZED)
->setJSON(['error' => 'Authentication is required.']);
}
}
The code on client es like this:
PHP Code: const token = 'token';
fetch('http://mydomain.com/myproject/client', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
const dataDiv = document.getElementById('data');
dataDiv.innerHTML = `<p>${JSON.stringify(data)}</p>`;
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
I'm probably getting something wrong but I don't realize it.
Can someone help me?
Regards.
|
loading ci4 app on server
[DEPRECATED] Creation of dynamic property
