get data from wp rest api from a cross domain

Question

I tried to get data from wordpress rest api from a js application which is in a cross domain, I got Access-Control-Allow-Origin error

axios.get(`https://bikeguy.xyz/wp-json/wp/v2/posts?categories=86`)
   .then( posts => console.log(posts) )

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

To allow cross domain access, I put these codes in functions.php file , but I get still same errors

// Hook.
add_action( 'rest_api_init', 'wp_rest_allow_all_cors', 15 );
/**
 * Allow all CORS.
 *
 * @since 1.0.0
 */
function wp_rest_allow_all_cors() {
    // Remove the default filter.
    remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
    // Add a Custom filter.
    add_filter( 'rest_pre_serve_request', function( $value ) {
        header( 'Access-Control-Allow-Origin: *' );
        header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
        header( 'Access-Control-Allow-Credentials: true' );
        return $value;
    });
} // End fucntion wp_rest_allow_all_cors().

You may need to modify your JS code which you haven't put to your question(but you should have done). Check this answer which uses jsonp: https://stackoverflow.com/a/36568974/701666 — Elvin Haci, Jun 23 '18 at 07:50
Show your javascript please, just tried this on one of my WP installs from JSFiddle and it worked fine. For the record your url is wrong. it should be /wp-json/wp/v2/posts which is very likely the problem. — Rick Calder, Jun 23 '18 at 07:51
@ElvinHaci WP rest API returns regular JSON, the issue is likely his url is wrong. — Rick Calder, Jun 23 '18 at 07:51
I don't know, it's working in jsfiddle but not working in my vue application — King Rayhan, Jun 23 '18 at 12:25
Is your Vue application using the URL in the code you posted or the one in the error you posted? — Rick Calder, Jun 23 '18 at 12:55

l2aelba · Answer 1 · 2021-02-02T13:40:59.097

I would like to add one more filter to prevent this.

Danger! Don't use in the production or without condition.

add_filter( 'rest_authentication_errors' , function() {
   wp_set_current_user( 1 );
}, 101 );

or full function:

function wp_api_allow_cors() {
  remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
  add_filter( 'rest_pre_serve_request' , function( $value ) {
    header( 'Access-Control-Allow-Headers: Authorization, X-WP-Nonce,Content-Type, X-Requested-With');
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    return $value;
  });

  // Danger: Don't use in the production or without condition.
  $domains = array( 'localhost', 'mydomain.com' );
  if ( in_array( $_SERVER['SERVER_NAME'], $domains ) ) {
    add_filter( 'rest_authentication_errors' , function() {
      wp_set_current_user( 1 );
    }, 101 );
  }
}

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

get data from wp rest api from a cross domain

1 Answers1