CodeIgniter 4 - Improved Auto Routing not working with AJAX request - php

Question

Just started a new project with CodeIgniter and after installation with composer I noticed the following warning in Routes.php:
// The Auto Routing (Legacy) is very dangerous. It is easy to create vulnerable apps...
So following the suggestion I set:
$routes->setAutoRoute(true);
and in Feature.php:
public bool $autoRoutesImproved = true;
My default route in Routes.php at the moment:
$routes->get('/', 'Authentication::index');
This is the Authentication controller
class Authentication extends BaseController {
public function index(): ResponseInterface {
...
return $this->response
->setBody($this->twig->render('login/view.twig'))
->setStatusCode(302);
}
public function postLogin(): ResponseInterface {
$authModel = new AuthenticationModel();
$response = $authModel->verifyLogin($_POST['loginUsername'], $_POST['loginPassword']);
return $this->response
->setBody($response)
->setStatusCode(200);
}
}
When I go to http://localhost:8080 the login page loads as it should.
I perform an AJAX request on the login page to verify the user credentials so that the latter can log in; but I am getting 404 on the following URL: http://localhost:8080/authentication/login
This is the AJAX request:
pageLoginForm.on('submit', function(e) {
let isValid = pageLoginForm.valid();
if (isValid) {
e.preventDefault();
$.ajax({
type: 'POST',
url: _baseUrl + 'authentication/login',
data: pageLoginForm.serializeArray(),
success: function (response) {
response === 'login' ? window.location.reload() : $('#errorMsg').text(response);
},
error: function () {
$('#errorMsg').text('An error occurred!');
}
});
}
});
I added the prefix "post" to my controller method as instructed by the documentation but it's not working.
Am I missing something?

Answer 1

It's a really frustrating issue with the pre-flight. Ajax made an options request to know if post is enebled. To solve this, make a controller to handle options requests whith:
php spark make:controller options
So modify controller in this way:
public function index()
{
return $this->optionsHandler();
}
public function optionsHandler(){
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("HTTP/1.1 200 OK");
return die();
}
Then inside Config/Routes.php Add:
$routes->options('(:any)', 'Options::optionsHandler');
Take a look how I've implemented this in my project:
https://github.com/Akir4d/AOP
I hope this helps!