Simple ajax request with Vanilla JS keeps given 400 Bad Request

You are a bit unspecific in terms of where you are trying to execute the request.

In case you want to GET data from an external point, you need to make sure that you are properly authenticated.

In case you want to GET data internally, you need to make sure you are including the correct “nonce” in your request.

What is the “nonce” ?

It is a “number, only used once”.

It is a random number, generated by your system for your system in order to make sure that the request and the response are not manipulated.

UPDATE:

I’ve found an old snippet in my collection and thought you’d appreciate it, this used to be a working ajax request in a plugin:

<script>
$('#google_apps_enabled').on('change', function(){

        // Get user-id and setting
        var user_id = $('.btn-apps-settings').data('user-id');
        var setting = $('#google_apps_enabled').is(':checked') ? '1' : '0';
        var sidebar = $('#google-apps-sticky');

        // Fire our ajax request!
        $.ajax({
            method: 'POST',
            // Here we supply the endpoint url, as opposed to the action in the data object with the admin-ajax method
            url: apps_rest_object.apps_api_url + '/users/' + user_id,
            data: {'google_apps_enabled': setting},
            beforeSend: function ( xhr ) {
                // Here we set a header 'X-WP-Nonce' with the nonce as opposed to the nonce in the data object with admin-ajax
                xhr.setRequestHeader( 'X-WP-Nonce', apps_rest_object.apps_api_nonce );
                $('#result').html(apps_rest_object.msg_loading).addClass('alert-warning');
            },
            success : function( response ) {
                if(response.google_apps_enabled == '1'){
                    $('#result').html(apps_rest_object.msg_enabled + '&nbsp;' + apps_rest_object.msg_reloading).removeClass('alert-warning').addClass('alert-success');
                    setTimeout(function() {
                    window.location.reload();
                    }, 3000);
                    console.log(_x('Sidebar', 'company-text-domain'));
                } else if(response.google_apps_enabled == '0') {
                    $('#result').html(apps_rest_object.msg_disabled).removeClass('alert-warning').addClass('alert-success');
                    sidebar.css('display', 'none');
                    console.log(_x('Sidebar', 'company-text-domain'));
                }
            },
            fail : function( response ) {
                console.log(response);
                $('#result').html(response.message).removeClass('alert-warning').addClass('alert-success');
            }
        });

    });

 <?php

// Best Post https://gopangolin.com/beyond-admin-ajax-using-wordpress-rest-api/
function rest_add_custom_user_endpoint() {
    // register_rest_field ('name-of-post-type', 'name-of-field-to-return', array-of-callbacks-and-schema() )
    register_rest_field(
        'user',
        'google_apps_enabled',
        array(
            'get_callback'    => 'user_meta_callback',
            'update_callback' => 'user_meta_update'
        )
    );
    register_rest_field(
        'user',
        'google_apps_sidebar_position',
        array(
            'get_callback'    => 'user_meta_callback',
            'update_callback' => 'user_meta_update'
        )
    );
}
add_action('rest_api_init', 'rest_add_custom_user_endpoint');

function user_meta_callback( $user, $field_name, $request) {
    return get_user_meta( $user['id'], $field_name, true );
}

//The callback handler for the endpoint
function user_meta_update( $value, $user, $field_name ) {
    return update_user_meta($user->ID, $field_name, $value);
}

?>


<?php

wp_register_script(
    'handle-unique-name',
    $dir . '/components/js/google-apps-frontend-actions.js',
    array('jquery'),
    NULL,
    true
);

wp_enqueue_script('handle-unique-name');


// Provide a global object to our JS file contaning our REST API 
// endpoint, and API nonce
// Nonce must be 'wp_rest' !
 wp_localize_script(
    // Script Handle
    'gac-google-apps-frontend-actions',
    // Js Object to internationalize
    'apps_rest_object',
    array(
        'apps_api_nonce' => wp_create_nonce('wp_rest'),
        'apps_api_url'   => site_url('/wp-json/wp/v2'),
        'msg_loading'   => __('Loading', 'company-text-domain'),
        'msg_enabled' => __('Google Apps enabled.', 'company-text-domain'),
        'msg_disabled' => __('Google Apps disabled.', 'company-text-domain'),
        'msg_reloading' => __('Reloading the page..', 'company-text-domain')
    )
);
?>

See this link for more information and this answer for a comprehensive overview:

WPSE Answer

WordPress Documentation Nonce