WP Rest API 自定义端点在 GET 和 POST 上返回 false

Question

I have a custom endpoint for User Meta that I've successfully registered to the WP REST API and created a custom endpoint for. However, whenever I make GET and POST requests from my single-page app (JS framework being used is Vue), the return value is 'false.'

I suspect this is happening due to some authorization issues using the JWT Authorization for WP REST API plugin.

Here are my steps taken in the functions.php app:

First I register the user meta field for the REST API:

//register user meta to rest api 
add_action( 'rest_api_init', 'adding_user_meta_rest' );

function adding_user_meta_rest (){
    register_meta(
     'user',
     'user_likes',
     array(
         'single'       => false,
         'type'         => 'object',
         'show_in_rest' => true,
     )
 );
};

This step appears to be working fine since the field is showing up when I use the path "/wp-json/wp/v2/users/".

Next step, I register the custom end point:

add_action('rest_api_init','add_user_likes');

function add_user_likes(){
    register_rest_route(
    'v1/user_likes','/(?P<id>\d+)',[[
        'methods'=> 'GET',
        'callback'=>'get_user_likes'
    ],
    [
        'methods'=> 'POST',
        'callback'=>'post_user_likes'
    ]]);
};

And here are my callbacks:

function get_user_likes(){
    $current_user_id = get_current_user_id();
    $status = $response->get_status;
    return get_user_meta($current_user_id,'user_likes');
}

function post_user_likes(WP_REST_Request $req){
    $body = $req->get_json_params();
    $current_user_id = get_current_user_id();
    return update_user_meta($current_user_id, 'user_likes',$body);
};

And then on the front end, here is my POST request:

handleLike(){
      fetch(`https://site-url.com/wp-json/v1/user_likes/${this.$store.state.userInfo.id}`,{
        method:"POST",
        body:JSON.stringify({
          post_id:this.currentPost.id,
          post_title:this.currentPost.title.rendered
        }),
         headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${this.$store.state.accessToken}`
        },
      }).then(resp=>resp.json())
      .then(data=>console.log(data)) 

My GET request is also returning false.

The issue I believe is that I am not retrieving the current user ID because according to docs for get_user_meta and update_user_meta, if user id is not determined, the function will return false. Why the user id is not being determined, I don't know. As I mentioned, I am using the JWT Authorization for WP REST API. Therefore based on my reading, I do not need to generate a nonce because WP will use the token to determine the current user. Let me know if I am wrong about that. Any guidance would be greatly appreciate.

Answer 1

Try this, set credentials & headers as in the example:

method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Cache-Control': 'no-cache',
      },
      body: params
    })

the corse can be managed by adding this to functions.php

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-Methods: POST, GET' );
        header( 'Access-Control-Allow-Credentials: true' );
        header( 'Access-Control-Expose-Headers: Link', false );
        header( 'Access-Control-Allow-Headers: X-Requested-With' );
        return $value;
    } );
}

add_action( 'rest_api_init', 'my_customize_rest_cors', 15 );

Answer 2

Figured out my issue. For future users using the JWT Authorization For WP REST API and hosting their Wordpress database on AWS Lightsail, here is how the .htaccess file must be stored on Bitnami's SSH:

<Directory "/opt/bitnami/apps/wordpress/htdocs”>
<IfModule mod_rewrite.c>RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
</IfModule>
</Directory>
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

Second issue I had: The token is already a string. Therefore putting it in a template literal causes parsing issues. Using a simple concatenation will do.

Here are the changes I made to authorization in the header (Note: this is using Vue's Vuex):

"Authorization": "Bearer" + this.$store.state.accessToken