Use Wordpress Nonce on Postman as a setRequestHeader like in jQuery/Javascript

Question

Here's my problem.

Actually it seems that I'm trying to solve a bug instead of address a problem and that's why:

I'm creating a plugin that works just fine in a WordPress environment and I'm using the WordPress nonce as an authentication mode.

I'm using jQuery/Ajax to pass the nonce in the header that I previously created with PHP:

PHP:

wp_register_script('front-main', plugins_url('js/front-main.js' , __FILE__ ), '', '', true );
wp_enqueue_script('front-main');
wp_localize_script( 'front-main', 'wpApiSettings', array(
    'root' => esc_url_raw( rest_url() ),
    'nonce' => wp_create_nonce( 'wp_rest' )
) );

Javascript/jQuery:

$.ajax({

method: 'GET',
url: wpApiSettings.root+'top-list-route/my-top-list-get',
contentType: 'application/json; charset=utf-8',
beforeSend: function ( xhr ) {
    xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
},
dataType: 'json',
success: ajaxResponse

});

function ajaxResponse(data) {
    console.log(data)
}

So far so good, in the nutshell, this app will work on this very route that I previously created with PHP:

public function my_register_route() {

   register_rest_route( 'top-list-route', 'my-top-list-get', array(
    array(
    'methods'  => WP_REST_Server::READABLE,
    'callback' => array($this, 'my_top_list_get'),
    'permission_callback' => function() {
       return current_user_can( 'edit_posts' );
     },
   ),

) );

Now, if I try to run the same code with the nonce (that I console.log on my browser) with Postman, visual studio code (with the extension of REST client) or simply in my URL on chrome, it is not going to work, for example:

POSTMAN:

GET http://netzstrategen.local/wp-json/top-list-route/my-top-list-get
(IN THE HEADERS section) X-WP-Nonce (key) 47489127d8 (value, for example)

will return:

{
    "code": "rest_cookie_invalid_nonce",
    "message": "Cookie nonce is invalid",
    "data": {
        "status": 403
    }
}

or if I use this URL for example:

http://netzstrategen.local/wp-json/top-list-route/my-top-list-get?_wpnonce=47489127d8

it will return the same status (403 rest_cookie_invalid_nonce).

Same problem with visual studio code, if I add any header to my GET request, for example:

GET http://netzstrategen.local/wp-json/top-list-route/my-top-list-get?_wpnonce=47489127d8

will return:

HTTP/1.1 403 Forbidden

{
  "code": "rest_cookie_invalid_nonce",
  "message": "Cookie nonce is invalid",
  "data": {
    "status": 403
  }
}

Any hint?

Answer 1

This may be a bit late but will hopefully be the resolution other's may need, this is how I am passing the nonce in the functions.php

wp_localize_script( 'app', 'WP_API_Settings', array(
  'endpoint' => esc_url_raw( rest_url() ),
  'nonce' => wp_create_nonce( 'wp_rest' )
) );

In Postman, I am passing the nonce via the request header

X-WP-Nonce:{{nonce}}
Cookie:{{cookie}}

What I've noticed is the nonce expires and you will have to pass the new value to Postman. I am using a variable so that it applies to all my routes in the collection. If you get an invalid nonce, make sure you are logged in via the Web, using Chrome Developer Tools, F12 and in the console I type wpApiSettings.nonce, which displays the latest nonce value. Copy and paste that value into your variable or use use the raw value and apply to the header.

I hope this helps, it was a pain to figure it out!