CSRF vuejs-axios not working

Hi,
Spending hours to post some vuejs - axios data to my codeigniter.

PHP Code:

axios({
method: 'post',
url: 'http://puppyplaza.dev/api/saveprofile',
data: {
    csrf_token: 'b2897db3f48b2c08c7313f280b290eb3',
    email: this.profile.email
}
}) 


In my config the token name is "csrf_token".  csrf_regenerate is FALSE just to simplify the problem.
http://puppyplaza.dev/api/save profile is a for now a simple controller to display the result (on my localhost)

PHP Code:

    public function saveprofile()
    {
        $data = array('data'=> 'data to send back to browser');
        $this->load->helper('security');
        //$this->input->post('csrf_token'); 
        //$csrf =  $this->security->get_csrf_hash();
        $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode(array('data' => $data, 'csrf' => $csrf)));

    } 


With Jquery it works
data: {'csrf_token':'b2897db3f48b2c08c7313f280b290eb3'},

With axios it wont!




Please, please anyone!?

After hours of of research I came up with the idea to check the security class.

Somehow the json post data from axios, or Superagent, or $http.post from my Vuejs file returns an empty ARRAY.


So the checkup for the CSRF token is always false because there is no data!
Therefore, if the $_POST is empty I check if there is any raw post input data and decode it


By extending the Security core class, adding MY_Security.php to application/core

PHP Code:

<?php
class MY_Security extends CI_Security{

public function csrf_verify(){
<?php
class MY_Security extends CI_Security{

public function csrf_verify(){ 


Copied the csrf_verify function from the original

PHP Code:

//if the $_POST array is empty, check for $raw_input_stream / php://input
 if(!$_POST){
  $_POST = json_decode(file_get_contents("php://input"), true);
 }
 // Check CSRF token validity, but don't error on mismatch just yet - we'll want to regenerate
 $valid = isset($_POST[$this->_csrf_token_name], $_COOKIE[$this->_csrf_cookie_name])
 && hash_equals($_POST[$this->_csrf_token_name], $_COOKIE[$this->_csrf_cookie_name]); 


Is there a better approach for this problem?

After hours of of research I came up with the idea to check the security class.

Somehow the json post data from axios, or Superagent, or $http.post from my Vuejs file returns an empty ARRAY.


So the checkup for the CSRF token is always false because there is no data!
Therefore, if the $_POST is empty I check if there is any raw post input data and decode it


By extending the Security core class, adding MY_Security.php to application/core

PHP Code:

<?php
class MY_Security extends CI_Security{

public function csrf_verify(){
<?php
class MY_Security extends CI_Security{

public function csrf_verify(){ 


Copied the csrf_verify function from the original

PHP Code:

//if the $_POST array is empty, check for $raw_input_stream / php://input
 if(!$_POST){
  $_POST = json_decode(file_get_contents("php://input"), true);
 }
 // Check CSRF token validity, but don't error on mismatch just yet - we'll want to regenerate
 $valid = isset($_POST[$this->_csrf_token_name], $_COOKIE[$this->_csrf_cookie_name])
 && hash_equals($_POST[$this->_csrf_token_name], $_COOKIE[$this->_csrf_cookie_name]); 


Is there a better approach for this problem?

https://github.com/axios/axios#using-app...ded-format

By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

https://github.com/axios/axios/issues/362
I hope it help you a little bit. I do not know if it work.

If you need help, i can make an example today/tomorrow.

Don't know if this thread is still active... just found it after writing https://forum.codeigniter.com/thread-74671.html
Maybe helpful for new people ending up here