On the fronted the wp_localize_script seems to be working as when I view the source I can see the nonce.

wp_localize_script('scripts', 'myAjax', array(
    'root_url' => get_site_url(),
    'ajaxurl'  => admin_url( 'admin-ajax.php' ),
    'nonce'    => wp_create_nonce('wp_rest')
));

For example, when I try get a list of users when logged into the wordpress backend I get a 401 unauthorised error. When I view the source my nonce is not there, only on the frontend.

$.ajax({
        url: '/',
        method: 'GET',
        beforeSend: (xhr) => {
        xhr.setRequestHeader('X-WP-Nonce', myAjax.nonce);
        },
    })
    .done(function (data) {
        console.log(data);
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus + ': ' + errorThrown);
        console.warn(jqXHR.responseText);
    })

On the fronted the wp_localize_script seems to be working as when I view the source I can see the nonce.

wp_localize_script('scripts', 'myAjax', array(
    'root_url' => get_site_url(),
    'ajaxurl'  => admin_url( 'admin-ajax.php' ),
    'nonce'    => wp_create_nonce('wp_rest')
));

For example, when I try get a list of users when logged into the wordpress backend I get a 401 unauthorised error. When I view the source my nonce is not there, only on the frontend.

$.ajax({
        url: 'https://example/wp-json/wp/v2/users/',
        method: 'GET',
        beforeSend: (xhr) => {
        xhr.setRequestHeader('X-WP-Nonce', myAjax.nonce);
        },
    })
    .done(function (data) {
        console.log(data);
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus + ': ' + errorThrown);
        console.warn(jqXHR.responseText);
    })

• ajax
• rest-api
• authentication
• nonce
• wp-localize-script

1 Answer 1

When you enqueue or localize a script you're doing it specifically for the front end or the admin. If you want to enqueue or localize a script in both, you have to specifically do it for both.

This is used to enqueue/localize for the front end

add_action( 'wp_enqueue_scripts', 'your_function_front' );
your_function_front() {
     wp_localize_script('scripts', 'myAjax', array(
         'root_url' => get_site_url(),
         'ajaxurl'  => admin_url( 'admin-ajax.php' ),
         'nonce'    => wp_create_nonce('wp_rest')
     ));
}

But for the backend you have to also add:

add_action( 'admin_enqueue_scripts', 'your_function_admin' );
your_function_admin() {
     wp_localize_script('scripts', 'myAjax', array(
         'root_url' => get_site_url(),
         'ajaxurl'  => admin_url( 'admin-ajax.php' ),
         'nonce'    => wp_create_nonce('wp_rest')
     ));
}

So if it works in the front end, then you've probably done the first one correctly, and you now just have to do it for the back end. Just remember to name your functions to something that'll make sense in your plugin/theme.