I’m using Axios
in Vue
to access the Codeigniter
post route but the request returns a 403 Forbidden. I have seen a few articles that provide guidelines but still get the error.
Below is my code sample.
Register.vue
<script setup>
import axios from 'axios';
import { reactive} from 'vue';
const registerForm = reactive({
email: '',
password: '',
repeatPassword: '',
});
const register = async() => {
try {
await axios.post("users/create-account", registerForm );
} catch (error) {
console.log(error);
}
}
</script>
main.js
import axios from 'axios';
window.axios = axios;
axios.defaults.baseURL = 'http://localhost:8080/'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
Codeigniter backend
App->Filters->Cors.php
public function before(RequestInterface $request, $arguments = null)
{
header("Access-Control-Allow-Origin: http://localhost:5173");
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, PUT, DELETE");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS"){
die();
}
}
App->Config->Filters.php
public $aliases = [
'cors' => AppFiltersCors::class, //added this line
];
public $globals = [
'before' => [
'cors', //added this line
// 'honeypot',
// 'csrf',
// 'invalidchars',
],
'after' => [
'toolbar',
// 'honeypot',
// 'secureheaders',
],
];