WordPress - axios post from vue app to admin-ajax.php bad request response

Viewed 18

I'm having some problem with admin-ajax.php when I try to send ajax request from my vue app to wordpress.

I have created a function in the functions.php file of the theme

function init_vue_app(){
 wp_register_script('vue-js', get_template_directory_uri() . '/dist/assets/index.js', array(), false, true);
 wp_enqueue_script('vue-js');
 wp_localize_script('vue-js', 'wp_params', 
  array(
   'ajaxurl' => admin_url( 'admin-ajax.php') 
  ) 
 );
 wp_register_script('vue-css', get_template_directory_uri() . '/dist/assets/index.js');
 wp_enqueue_style('vue-css');
} 
add_action('wp_enqueue_scripts', 'init_vue_app');
function test(){
 var_dump($_POST['test']);
}
add_action('wp_ajax_nopriv_test', 'test');
add_action('wp_ajax_test', 'test');

I've used the wp_localize_script to pass the admin url to my vue app that is loaded inside a page template and if I log the passed param it will show the correct result.

In my methods I have created a method that will use axios to send the post request to wordpress with this code

axios.post(wp_params.ajaxurl, {
 action: 'test',
 test: this.testData
}).then( res => {
 console.log(res)
}).catch( e => console.log(e) )

Anyway during tests on localhost I will always get a 400 status code ERR_BAD_REQUEST. How I can fix it? I'm doing something wrong?

0 Answers
Related