Site icon Hip-Hop Website Design and Development

400 Dangerous Request when sending XHR from React.js to admin-ajax.php

I am attempting to ship ajax requests from a React.js app to wordpress’s admin-ajax.php. Here’s a mini check plugin I wrote to check this:

// plugins folder > xhrLink/xhrLink.php
<?php

/*
Plugin Title: Xhr Hyperlink
*/

perform basicPage() {
  echo "<h1>Admin Web page</h1>";
}

perform setupParams() {
  add_options_page('XHR Hyperlink', 'XHR Hyperlink', 'manage_options', 'xhr-link',  'basicPage');
}
add_action('admin_menu', 'setupParams');


perform handleXhrLink() {
  wp_send_json('this response got here from the again finish');
}
add_action('wp_ajax_xhrLink', 'handleXhrLink');


// theme folder > capabilities.php
perform add_cors_http_header() {
  header("Entry-Management-Permit-Origin: *");
}
add_action('init','add_cors_http_header');

Within the React.js app I’ve the next perform set to fireside on the onClick attribute of a button:

const sendXhrLinkRequest = () => {
      let form_data = new FormData;
      form_data.append('motion', 'xhrLink');

      axios
        .put up('http://localhost/wptest2/wp-admin/admin-ajax.php', form_data)
        .then(response => {
          console.log(response, `=====sendXhrLinkRequest response=====`);
      });

  };

From WordPress AJAX with Axios:

FormData interface offers a method to simply assemble a set of
key/worth pairs representing type fields and their values, which may
then be simply despatched utilizing the XMLHttpRequest.ship() technique. It makes use of
the identical format a type would use if the encoding kind had been set to
“multipart/form-data”.

After clicking the button the Chrome console reveals this:

VM596:1 POST http://localhost/wptest2/wp-admin/admin-ajax.php 400 (Dangerous Request)
(nameless) @ VM596:1

VM596:1 XHR failed loading: POST "http://localhost/wptest2/wp-admin/admin-ajax.php".

createError.js:16 Uncaught (in promise) Error: Request failed with standing code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:59)

Does anybody know what causes these errors and the best way to deal with them?

Additionally tried: