dazz17

Thank you @bcworkz ?? .

Oh damn, So my actual use case is creating an api inside a wordpress plugin and calling that api from another website. Thank you so much for time @bcworkz . Do know any solutions for my above use case? also is there any way to communicate with the wordpress server from an external server ?

@bcworkz Thanks for confirming.
Creating nonce and registering rest routes

add_action('admin_enqueue_scripts','addScripts');
function addScripts() { 
    wp_enqueue_script('axios', 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js', 1);
    wp_enqueue_script('vue',plugin_dir_url(__FILE__).'MiddleMan.js',1);
    fp_localize_script();
}
function fp_localize_script()
{
    $plugin_config = array(
        'allowedOrigin' => $_SERVER['SERVER_NAME'],
        'allowedDevOrigin' => $_SERVER['HTTP_HOST'],
        'ajaxurl' => admin_url('admin-ajax.php', 'relative'),
        'nonce'=> wp_create_nonce('wp_rest'),
    );
    wp_localize_script( 'vue', 'fpPluginConfig', $plugin_config );
}

function my_customize_rest_cors() {
	remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
	add_filter( 'rest_pre_serve_request', function( $value ) {
		header( 'Access-Control-Allow-Origin: *' );
        header( 'Access-Control-Allow-Headers: X-WP-NONCE, Content-Type');
		return $value;
	} );
}
add_action( 'rest_api_init', 'my_customize_rest_cors', 15 );
add_action( 'rest_api_init', function () {
    register_rest_route(
        'fpwp',
        'posts/',
        array(
            'methods' => 'POST',
            'permission_callback' => function () {
                return current_user_can('edit_others_posts');
            },
            'callback' => 'newEndPointCallback'
        ) );
      register_rest_route(
        'fpwp',
        'authmeth/',
        array(
            'methods' => 'POST',
            'permission_callback' => function () {
                return current_user_can('edit_others_posts');
            },
            'callback' => 'accessFirstPageCallback'
        ));
  } );

I console.log this nonce created here and copy that to vue instance from which the api calls are made.

The vue js code goes as below.

async getAccessToken () {
    let headers = {
      'X-WP-NONCE': the_actual_nonce_value_which_was_copied
    };
    try {
      const response = await Axios.post('https://localhost/wordpress/wp-json/fpwp/authmeth/', {}, { headers: headers });
      return response;
    } catch (error) {
      throw error;
    }
  }

The reason why I was doubting the origin issue was because the nonce was validated perfectly when I enqueued the vue js build files into the wordpress plugin. Only when the api call was made from a different origin, the nonce was invalid.

• This reply was modified 5 years, 2 months ago by dazz17.

Cool, I understand that. So the nonce created in the server A is sent to the server B. The server B is now trying to make an api call to the server A using the same nonce which came from server A. Since the nonce is originally created from the server A, Will the request be allowed or will it be forbidden due to invalid nonce error?

Thanks for you replay Joy, But i’m doing the same you suggested but it still says nonce invalid. The only difference is my javascript files are in a different domain not inside the wordpress plugin. I’ve copied the nonce value from the server and I sent it through the api calls for verification. Also I’ve created the nonce value using the action “wp_rest” as mentioned in the documentation

Will the nonce work when a rest api registered inside a wordpress plugin is called from another domain from the same browser with wordpress website logged in as admin?