Enable CORS on JSON API Wordpress

Question

I have this wordpress site with a plugin called JSON API. This plugin provides a JSON format for the content that is in the wordpress. I was able to enable CORS on the wordp

Answer 1

Before the response is sent to the browser, we can run two action hooks and insert a new header():

do_action("json_api", $controller, $method);
do_action("json_api-{$controller}-$method");

The first one runs on every method, and the second one is to target specific methods. Here's an implementation of the first one, with a commented way to find the second:

add_action( 'json_api', function( $controller, $method )
{
    # DEBUG
    // wp_die( "To target only this method use <pre><code>add_action('$controller-$method', function(){ /*YOUR-STUFF*/ });</code></pre>" );

    header( "Access-Control-Allow-Origin: *" );
}, 10, 2 );

Answer 2

The solution works with WordPress 5.1.1 and Gutenberg

add_filter('rest_url', function($url) {
    $url = str_replace(home_url(), site_url(), $url);
    return $url;
});

Answer 3

For anyone who is having this issue with multiple origins

In your server hosting your wordpress site, navigate to ../wp-content/plugins/json-rest-api and from here open the plugin.php file.

In this function

function json_send_cors_headers( $value ) {..}

Change the header

header( 'Access-Control-Allow-Origin: ' . esc_url_raw( $origin ) );

To

header( 'Access-Control-Allow-Origin: *' );

Hope this helps anyone who was incurring the same issues as I.

Answer 4

I've used a few different WordPress API's - but for those of you using the 'official' WP-API, I had much trouble with this CORS --- and what I found was that between the .htaccess approach and a few others I stumbled upon... adding this to your theme functions.php worked best.

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

Be sure not to use any combinations of these ( .htaccess, header.php, api.php, functions.php ) as it will be angry at you.

Answer 5

WordPress 5 (4.4+ actually) can handle it via WP Headers:

Try this:

add_filter( 'wp_headers', 'send_cors_headers', 11, 1 );
function send_cors_headers( $headers ) {
    $headers['Access-Control-Allow-Origin'] = $_SERVER[ 'HTTP_ORIGIN' ];
    return $headers;
}

Note that this will allow access from ANY source. For security you should try to do something like set an array of allowed domains that can make the request to your WordPress site and short-circuit the allow CORS if the domain making the request is not in the allowed list:

add_filter( 'wp_headers', 'send_cors_headers', 11, 1 );
function send_cors_headers( $headers ) {
    $allowed_domains = array( 'https://my.okdomain.com' , 'http://anothergoodone.com');
    if ( ! in_array( $_SERVER[ 'HTTP_ORIGIN' ] , $allowed_domains ) ) return $headers;
    $headers['Access-Control-Allow-Origin'] = $_SERVER[ 'HTTP_ORIGIN' ];
    return $headers;
}

Answer 6

Using Wordpress 5.2.3 - whilst using GET and POST externally, the following finally opened sesame for me. I tried all of the answers above (to no avail) before finding this solution that worked for my case.

add_action( 'rest_api_init', function () {
    add_action( 'rest_pre_serve_request', function () {
        header( 'Access-Control-Allow-Headers: Authorization, Content-Type, X-WP-Wpml-Language', true );
        header("Access-Control-Allow-Origin: *");
    } );
}, 15 );

Hopefully WordPress will have an official doggy door-flap for CORS control in the future.