Codeigniter3 403 error on axios post with VUEJS - codeigniter

Question

I'm getting a 403 error when I try to post a form with codeigniter, vuejs and axios. I try many ways os solve this problem around the forum and internet, but nothing work. Here is the code, thank you for your help.
P.D: Code was working with form helper (form_open ) when I have to change it to normal html form I get 403 error...I think the problem is csrf token
Codeigniter config
$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'csrf_token_idic';
$config['csrf_cookie_name'] = 'csrf_cookie_idic';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = TRUE;
$config['csrf_exclude_uris'] = array();
VUEJS and axios
var app = new Vue({
el: '#app',
data: function() {
return {
table: [{
n_muestra: '',
descripcion: '',
lote: '',
cantidad: '',
n_planilla: '',
ot_interna: '',
delete: false
}],
cant_filas: 1,
csrf_token_idic: '<?= $this->security->get_csrf_hash(); ?>',
}
},
methods:{
validateBeforeSubmit(e) {
e.preventDefault();
axios.defaults.withCredentials = true
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = this.csrf_token_idic;
this.$validator.validateAll().then((result) => {
if (result) {
data= {
'csrf_token_idic': this.csrf_token_idic,
'data': this.table
}
axios.post(baseUrl+'create/add_internal_work_orders/'+'<?php echo $this->uri->segment(3)?>' ,data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
return;
}else{
alert("no");
}
});
}
}
})
BROWSER PREVIEW
caption

Answer 1

You must pass the data in the form of FormData.
For example:
Use in php page:
<?php
$csrf = array(
'name' => $this->security->get_csrf_token_name(),
'hash' => $this->security->get_csrf_hash()
);
?>
new Vue({
el: '#app',
data() {
return {
token_name: '<?= $csrf['name']; ?>',
token_hash: '<?= $csrf['hash']; ?>',
...
methods: {
validateBeforeSubmit(){
var bodyFormData = new FormData();
bodyFormData.append(this.token_name, this.token_hash);
bodyFormData.append('firstname', 'Joe');
bodyFormData.append('lastname', 'Backer');
bodyFormData.append('age', 31);
axios.post(baseUrl+'create/add_internal_work_orders/'+'<?php echo $this->uri->segment(3)?>', bodyFormData)
.then(response => {
console.log(response);
});
}
https://codeigniter.com/userguide3/libraries/security.html?highlight=security