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?